CODEWITHSUNDEEP
htmlcss
Lucas Ou-Yang
Lucas Ou-Yang

Reputation: 5655

Issue with websites not scaling to fit on a mobile screen

I used http://reddit.com's website as a reference to build a css webpage where the side bar always remains the same size on the page, while the whole left side shrinks gradually when the screen does. 

sidebar{width:400px;float:right;/*rest doesn't matter*/}
leftside{width:auto;height:auto;;overflow:hidden;/* no float */} // i think this
// is where i missed up, reddit's site didn't have this

Anyways, this site won't scale at all on a mobile device, the sidebar takes up the entire screen, but on reddit's site it scales nicely. How can I make my site scale? Do i need another div to wrap the side and the left side? I tried to look this up online, but everyone just said to not use px to define the side bar, but reddit used px and it still scaled...

Thanks

Upvotes: 2

Views: 733

Answers (2)

Samuel Charpentier
Samuel Charpentier

Reputation: 609

If on mobile device the thing scale its probably due to a media queries that use the screen size because on my browser reddit act the same as your description and the side bar take the whole browser size when i resize it down to the size of a mobile device. if you want it not to act like reddit does on browser you can eighter; use media queries along with the width of the browser and resize the side bar in these rules or; use some sort of javascript or html5 and css to set the side bar into a button and make it expand to the whole screen when OnClick

Upvotes: 3

SaidbakR
SaidbakR

Reputation: 13544

Try to use responsive css framework such as http://foundation.zurb.com/ or http://gumbyframework.com/

Upvotes: 2

Related Questions