www.webdeveloper.com
Results 1 to 6 of 6

Thread: How to make my site resizable?

  1. #1
    Join Date
    Jun 2013
    Posts
    38

    How to 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
    Join Date
    May 2013
    Posts
    55
    First I think you should make three column website, set those columns to float:left and set there width to % value not exceeding the container div tag, and I think it will be better to put overflow value to hidden instead of auto. Hope it helps

  3. #3
    Join Date
    May 2013
    Posts
    55
    Ow and if you want to make your video and image re-sizable than also set there width to a % value.

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    Might help:

    Choosing Dimensions for Your Web Page Layout:

    Sizing (Web) components (13Jul2013): https://medium.com/p/8f433689736f
    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
    Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choos...b-page-layout/
    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
    Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/
    Care With Font Size: http://www.w3.org/QA/Tips/font-size

    responsivepx – screen-size testing tool: http://responsivepx.com/

    FitText.js plugin (FitText is a jQuery plugin that makes your font-sizes flexible, allowing headlines to automatically-expand to fit the available space): http://fittextjs.com/
    Adapt.js - Adaptive CSS: http://adapt.960.gs/

  5. #5
    Join Date
    Jun 2013
    Posts
    38
    Quote Originally Posted by Harith View Post
    First I think you should make three column website, set those columns to float:left and set there width to % value not exceeding the container div tag, and I think it will be better to put overflow value to hidden instead of auto. Hope it helps
    Thank you for the help.

    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/0B8XW...it?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...

  6. #6
    Join Date
    May 2013
    Posts
    55
    if u want a fixed layout, then probably set things in px, but if you want a fluid layout then set things to %.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles