#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    50
    Rep Power
    2

    How do I make my site resizable?


    So, I have finished laying out my webpage, for the most part, but I've been using a giant mac monitor to do so. As soon as I re-size the window, everything shifts around and loses it's layout and styling.

    How do I keep everything in the same place when the window is resized?

    I can post my code if you like, but it would be quite long. what do you need to see in order to help me?

    The website is http://www.thinkinkutah.com/whyrefill.

    It's not "live" yet, so please keep this as confidential as possible.

    Thanks!
  2. #2
  3. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,317
    Rep Power
    7170
    The resizing does not work well because you specify values for widths/margins/padding/etc. using a mixture of fixed values and relative values (percents). When you change the size of the window, the relative values are going to change but the fixed values are not. This results in the poor resizing behavior that you're seeing.

    When designing a site you need to either make it a fixed-width design or a fluid design. If you choose to go with a fluid design, you can still constrain elements to fixed widths using min-width and max-width.

    One of the more significant issues that you're running into on your design is the way you have tried to center the page using a fixed-width margin on #sidebar. Instead, you should give #container either a fixed-width or a max-width and then put margin:auto; on it to center it in the browser. Then you will remove your margin from #sidebar and #sideright.

    The next significant issues is that your page is just too wide. I'm looking at it on a 1920x1080 resolution monitor, the largest commonly used sized, and the page is still far wider than my screen. The number of people with more than 1920px of horizontal resolution is something like 1%. As a general rule of thumb, you should plan your designs to look good at around 1000px of horizontal resolution. That will work well for 99% of (non-mobile) visitors.

    It's not "live" yet, so please keep this as confidential as possible.
    If you want me to remove the link from your post I will, but "as confidential as possible" means not confidential at all because this is a public page and literally anyone in the entire world who has internet access can view it or search for it on Google.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    50
    Rep Power
    2
    Originally Posted by E-Oreo
    The next significant issues is that your page is just too wide. I'm looking at it on a 1920x1080 resolution monitor, the largest commonly used sized, and the page is still far wider than my screen. The number of people with more than 1920px of horizontal resolution is something like 1%. As a general rule of thumb, you should plan your designs to look good at around 1000px of horizontal resolution. That will work well for 99% of (non-mobile) visitors.
    How do I do this? Like I said, I created it on a big monitor and I am new to this, so I didnt plan my layout before I began, I just made it look good on my screen. How do I shrink this down so it will be the right width for most people?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    50
    Rep Power
    2
    Code:
    When designing a site you need to either make it a fixed-width design or a fluid design. If you choose to go with a fluid design, you can still constrain elements to fixed widths using min-width and max-width.
    You mention min-width and max-width and a fluid design. what does that mean?

    Can you give me an example?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    50
    Rep Power
    2
    Thank you for the help, really.

    I'm still a little confused. different people are telling me to do different things. I really (bottom line) just need it to look good no matter who is looking at it on what screen. I coded it on a 1920 monitor and I guess that was my problem. Do I change everything to percentages? Do I change everything to pixels? I'm a little confused here.

    I already have, more or less, a three column site, do I not? I have my sidebar, main, and sideright. Then a header and footer. The website SHOULD look like this:
    https://docs.google.com/file/d/0B8XWuK8i0iJeNm9TRDY0Skw5MEk/edit?usp=sharing

    There should be a left sidebar with the two images, a video in the middle with the two columns underneath it, then a right sidebar with the quotes. And a header and footer...
  10. #6
  11. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,317
    Rep Power
    7170
    Well it's looking a lot better now than it was earlier today.

    min-width and max-width are CSS properties. If you have a block element that has a percentage width, you can give it a min-width and a max-width in pixels to put a minimum and a maximum boundary on the size of the element.

    You can change your widths to percentages, or you can change them to pixels. The most important part is not to mix the two. It all depends on whether you want the widths of your columns to change depending on the browser size.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around

IMN logo majestic logo threadwatch logo seochat tools logo