CODEWITHSUNDEEP
iphonecssmobilehtml
meowmers
meowmers

Reputation: 139

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

[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?

Upvotes: 0

Views: 248

Answers (1)

Sean Redmond
Sean Redmond

Reputation: 4114

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)

Upvotes: 5

Related Questions