Solved

Image or Header Not Displaying Correctly

Posted on 2014-04-09
6
167 Views
Last Modified: 2014-05-24
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...
0
Comment
Question by:oo7ml
  • 2
  • 2
6 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39990669
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
 

Author Comment

by:oo7ml
ID: 39990964
Thanks Scott, sorry i am not sure what you mean... can you elaborate please, thanks.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39991327
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
 

Accepted Solution

by:
oo7ml earned 0 total points
ID: 39991456
I figured it out... there was a margin-top in img.img-responsive that needed to be removed...
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now