Forums

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

Home Forums CSS css3 min-max width when zooming out pages

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #35157

    A good day to you. I am working on a webpage but I got stuck on defining the max and min width. Basically I would want my page to be centered in when zooming out the webpages like what most webpages does. Its like the whole container are being compress and not only the content itself. Please need expert help.ASAP thanks.

    html,body
    {
    height:100%;
    width:100%;
    margin:0;
    padding:0;


    }
    body
    {
    background-image:url(bg3.jpg);
    background-repeat:repeat;
    padding:1px 0;
    box-sizing:border-box;
    }
    #mainContainer
    {
    background-image:url(bg3.jpg);
    background-repeat:repeat;
    background-color:#999;
    width:70%;
    padding:0;
    min-width:940px;
    margin:0 auto;
    min-height:100%;/
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }
    #90640
    standuncan
    Member

    A link would help. But why do you have width at 70% and a min-width of 940px on your container? That could be contradictive.

    #90657

    The min-width:940px is used whenever the browser is resized. the #mainContainer will keep itself intact because of the absolute value i gave the min-width (px). Once i remove it the #mainContainer adapts the 70% width therefore messing up the content.

    sorry but i havent got contact with my web hosts. I hope snapshots would help u to understand.
    I want the #mainContainer to limit its width once I zoom it out therefore compressing all of its contents moving it all to the center.
    here is the snapshot of how it originally/normally looks like.
    http://tinypic.com/r/28wjcci/5
    then this what it looks like when i zoom out my browser.
    http://tinypic.com/r/102qlcn/5
    this is what i want it to look like when zoomed out.
    http://tinypic.com/r/2v2uuea/5

    .see the difference? =D Basically i think that its the width:70% that causes the dilemma but I cant remove this because my page will then not be liquid with others sizes of screen. i can got what i want it to look if i defined the width or the max-width in px (but then its not applicable for a layout to be liquid)

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