Home/ Questions/Q 8878107
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T19:37:59+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)

    • 0