CODEWITHSUNDEEP
htmlcss
user3404465
user3404465

Reputation: 43

Trying to resize an entire page (IE shrink everything down)

I have a website that I made (without bootstrap or any or that stuff, and I am having an issue trying to scale everything down for people with a smaller screen resolution. basically I'll want it to detect the size, and apply appropriate CSS classes to elements to scale everything down if under a specific width. Right now I am just trying to build the CSS classes, and I am having some difficulties. The closest I've gotten is shrinking all the content down using:

transform: scale(.75);

That works awesome on the actual content for resizing, but I'm left with a large padded field around the content. a bit hard to explain, but what I want is for the content to shrink, but the divs to still be 100% of the browser (so if there is a smaller browser it fits nicely without this stupid large padded area around the content)

Here is how it normally looks: image!

and here is how it looks with the added CSS transform:image2!

Any ideas for how to overcome this would be greatly appreciated, Also note I really don't care about my solution not working in IE9 or lower!

The basic output that I want is the equivelent of shrinking the browser zoom to 75% if that helps..

Upvotes: 1

Views: 854

Answers (1)

ralph.m
ralph.m

Reputation: 14345

Depending on how your CSS is written, something as simple as this could work:

@media only screen and (max-width: 600px) {
    body {font-size: 85%;}
}

If you have divs with em widths that will shrink their width, but you could change that via the media query above, perhaps setting their widths to 100% etc.

Upvotes: 1

Related Questions