Two CSS Problems - One only happens on mobile, one on chrome

Question

[link removed] on iPhone, the top banner will not stretch all the way. Solution?

heres a screenshot: ![enter image description here][1]

Here's the CSS ive applied to the div:

#banner {
    background-color: #F7F7F7;
    background-size: cover;
    box-shadow: 0 0 30px 2px #DCCFBF inset;
    display: inline-block;
    height: 200px;
    width: 100%;

Issue 2. In chrome, when I resize the browser window, the bottom two nav icons shift (graphic design and social media). I put them in a container to try to keep them in place but it still happens... only on chrome. I realize the whole site shifts, but the other icons in the nav stop after a while and the bottoms one overlap them and it looks bad. Any suggestions?

score 5 · Accepted Answer · edited May 23 '17 at 11:44

The banner doesn't stretch all the way because your content is wider than what mobile Safari treats as the full width. It then scales down the whole page to fit the content and strands the header a bit.

see this answer to a similar question

It is usually fixed by adding

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

to the <head>

As for the icons, Chrome seems to be respecting the @media query value of width: 100% on #home (line 528 of main.css) as you shrink the browser window while Firefox does not, and retains the first value width: 1020px (l. 91)

Two CSS Problems - One only happens on mobile, one on chrome

1 Answers1