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.


goo.gl/ji6QQJ


ss
Can anyone suggest what could be wrong please, thanks in advance...
oo7mlAsked:
Who is Participating?
 
oo7mlConnect With a Mentor Author Commented:
I figured it out... there was a margin-top in img.img-responsive that needed to be removed...
0
 
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>
        </div>
    </section>

Open in new window

0
 
oo7mlAuthor Commented:
Thanks Scott, sorry i am not sure what you mean... can you elaborate please, thanks.
0
 
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.

media="all"
.img-responsive {
/* display: block; */
max-width: 100%;
height: auto;
}

Open in new window

0
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.

All Courses

From novice to tech pro — start learning today.