• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 178
  • Last Modified:

Image or Header Not Displaying Correctly

Hi, my site is displaying fine on desktop, but one of the sections is not displaying correctly on mobile - it seems that the large phone image does not centre and therefore it is too close to the heading.


Can anyone suggest what could be wrong please, thanks in advance...
  • 2
  • 2
1 Solution
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I wonder if this section above that is nothing more then white dots is pushing it down

<section class="arrowsbg homepagesections-4-features arrows_box">
        <div class="arrows">
			            <svg viewBox="0 0 32 32" class="arrow_down" id="section-1-next">
                <use xlink:href="#right-arrow"></use></svg>
            <svg viewBox="0 0 32 32" class="arrow_up" id="section-1-back">
                <use xlink:href="#left-arrow"></use></svg>

Open in new window

oo7mlAuthor Commented:
Thanks Scott, sorry i am not sure what you mean... can you elaborate please, thanks.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Narrow the browser all the way and you can see a big white gap above where that image is.  It is from the section with 2 white circles above.  Use your media query to take that out when the browser is narrow and see what happens.  

I also noticed when I comment out the display block in img.responsive it works.  That may be all you need. I am still bothered by the big gap above when narrowed though.

.img-responsive {
/* display: block; */
max-width: 100%;
height: auto;

Open in new window

oo7mlAuthor Commented:
I figured it out... there was a margin-top in img.img-responsive that needed to be removed...
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now