horiztonal scrollbar for 800×600 users

  • Resolved katiediddesign

    (@katiediddesign)


    14 years, 2 months ago

    Another problem that I can’t seem to figure out what I’m missing.

    Here’s the site:
    https://www.pinkkitchen.info

    I used Sandbox, and the layout is elastic, allowing the main “column” to expand and contract if the user’s browser window is wider or narrower.

    The problem is that, if a user has their browser less than 1000px, the navigation menu at the top starts losing visible items. There are so few users using this narrow a resolution that I want to keep this site design…but I want those few to not lose vital navigation. I’d rather a horizontal scrollbar pop up for the whole site.

    I can’t set a fixed width for one of the divs because then it won’t expand for wider resolutions.

    I tried the old non-CSS way…I stuck a wide 1px high image at the very bottom inside the main div, but that didn’t work…the image just popped outside the div.

    I’m thinking there’s probably more than one way to achieve this, but all my searches are coming up blank! Can anyone tell me how to do this?

Viewing 3 replies - 1 through 3 (of 3 total)

  • you could try to set a min-width: to the main container:

    https://www.w3schools.com/CSS/pr_dim_min-width.asp

    This will extend only the brown menu area out past and above your sidebar, preventing the wrap of the menu items when the screen is smaller than 1000px or so.

    It’s functional as long as you don’t add any additional menu items.

    Edit your style.css begining on line 106

    div#menu div {
    background: #503a2c;
    margin-right:292px;
    margin-left:265px;
    min-width:390px;
    height:37px;
    }

    It’s possible to tailor some rules specifically for smaller resolutions, like mobile devices, via media queries.

    Additional info:

    Thread Starter katiediddesign

    (@katiediddesign)

    Thanks so much! The min-width worked. I thought I’d tried it before, but I must have tried it on something else or something. Thanks for making me try it again!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘horiztonal scrollbar for 800×600 users’ is closed to new replies.