The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS banner won’t stretch when window sized small

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #37407

    if you go here:

    and resize your screen really narrow you get scrollbars and if you scroll right the banner is broken
    what can i do to fix this for all size screens?
    i added width 100% but that doesn’t work.
    and i noticed that when its narrow the body isn’t the whole viewport for some weird reason


    body {min-width:960px;} (same as .wrap) ;)


    Hello good sir!

    The Problem: width:100% does not work because it refers to the current width of the window, and because your content is wider then the width of the window (thus needing the scrollbar) it stops when you scroll over.

    Fun Facts!: If you were to set the width to over 100%, you would see it account for the extra stuff, but it also causes more problems :(

    The Solution!: The html tag has a default of width:100%. Simply adding a minimum width to it will fix the issue. That way it will always account for all of your content.

    BAM! Code Example!

    html {
    min-width:960px /* the width of your content */

    it helps a little but not enough i still see a gap and theres nothing even overflowing the viewport now.
    oh and I’m talking about a different page actually. this one:

    im remaking my website into a wordpress theme


    because i made a dynamic width centered on my menu list. instead of setting a width to the ul and giving it margin auto I did a weird thing and the actual ul is off to the side. its weird but it was the only way to make a dynamic width centered.
    so the actual min-width would have to be more than 960 in this case.

    or the simple overflow:hidden did the trick :)

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.