Turn on thread page Beta
    • Thread Starter
    Offline

    14
    ReputationRep:
    Hey all,

    Was wondering if anyone could help me out - I'm trying to set my webpage to fit all different resolutions in CSS.

    I've tried {width:auto;} and {width:100%;} in CSS and they didn't work. If I can do it in HTML let me know.

    Thanks,

    Ben
    Offline

    12
    ReputationRep:
    (Original post by Ben_K)
    Hey all,

    Was wondering if anyone could help me out - I'm trying to set my webpage to fit all different resolutions in CSS.

    I've tried {width:auto;} and {width:100%;} in CSS and they didn't work. If I can do it in HTML let me know.

    Thanks,

    Ben
    Hi, in HTML you can try to set the “width” attribute to an absolute value (such as: 1000px) rather than a percentage value (for example: width:20%), or in CSS try and use the property width="100%",or in 'Tables', 'Form', 'Div tags', 'Inspite of width="100px"
    Offline

    0
    ReputationRep:
    The issue is that when you set:

    html {
    width: 100%;
    }

    You're just setting the width of the HTML on the page to 100%. This means that your html tag will fill the width of your page. It will limit the width to the total width of the browser. A minimum width can be applied with the use of 'min-width'. IE:

    html {
    min-width: 960px;
    }
    • Thread Starter
    Offline

    14
    ReputationRep:
    (Original post by Cal97g)
    The issue is that when you set:

    html {
    width: 100%;
    }

    You're just setting the width of the HTML on the page to 100%. This means that your html tag will fill the width of your page. It will limit the width to the total width of the browser. A minimum width can be applied with the use of 'min-width'. IE:

    html {
    min-width: 960px;
    }



    So the part I highlighted in bold - I enter that exactly in CSS? That doesn't seem to work
    Offline

    0
    ReputationRep:
    Follow this tutorial: http://www.youtube.com/watch?v=eOG90Q8EfRo

    It will show you how to dynamically change your css based on the width of the browser, which I assume is what you're looking for?

    I had an example but I removed it from my hdd for some reason.
    • Thread Starter
    Offline

    14
    ReputationRep:
    (Original post by Cal97g)
    Follow this tutorial: http://www.youtube.com/watch?v=eOG90Q8EfRo

    It will show you how to dynamically change your css based on the width of the browser, which I assume is what you're looking for?

    I had an example but I removed it from my hdd for some reason.
    I've found the solution now.... I was entering the code into the body and not the header. Silly me

    Edit: For any on lookers - <style> body { margin: 0px; padding: 0px; width: 700px; }
    img { width: 100%; } </style>
    Offline

    19
    ReputationRep:
    (Original post by Cal97g)
    Follow this tutorial: http://www.youtube.com/watch?v=eOG90Q8EfRo

    It will show you how to dynamically change your css based on the width of the browser, which I assume is what you're looking for?

    I had an example but I removed it from my hdd for some reason.
    Cool, A rather useless link, as that is pretty much a guide on how NOT to do RWD.

    OP - take a look at the Bootstrap Framework, it pretty much does most of the tedious stuff for you, making it perfect for beginners : http://getbootstrap.com
    Offline

    0
    ReputationRep:
    (Original post by iainvg)
    Cool, A rather useless link, as that is pretty much a guide on how NOT to do RWD.

    OP - take a look at the Bootstrap Framework, it pretty much does most of the tedious stuff for you, making it perfect for beginners : http://getbootstrap.com
    Cool, a rather useless suggestion that is completely pointless for one image.
 
 
 
Poll
Black Friday: Yay or Nay?
Useful resources

The Student Room, Get Revising and Marked by Teachers are trading names of The Student Room Group Ltd.

Register Number: 04666380 (England and Wales), VAT No. 806 8067 22 Registered Office: International House, Queens Road, Brighton, BN1 3XE

Write a reply...
Reply
Hide
Reputation gems: You get these gems as you gain rep from other members for making good contributions and giving helpful advice.