CODEWITHSUNDEEP
htmlcss
moey
moey

Reputation: 10907

How to "scale down" a large HTML page

I have a static web page (HTML & CSS) with a width of 2400 pixels. As you might have guessed, this would exceed most of the typical screen resolution. One possible solution for this is to completely refactor the code to "scale" the page down to e.g. 1200 pixels. But, this sounds rather painful, considering I'd need to scale down the related images as well.

Is there a (simpler) way to scale this page to a specific width? The height should adjust accordingly too.

To put it differently, if I had a 2x-by-2y page, how to scale it down to e.g. x-by-y dimension?

Thanks.

Upvotes: 0

Views: 94

Answers (1)

Papouche Guinslyzinho
Papouche Guinslyzinho

Reputation: 5468

you could transfert your stylesheet into scss a css preprocessor. I think that the easiest way is if your stylesheets are written in (sass/scsss,stylus) it would be easier to set a variable for the width and height.

Otherwise you can use @media queries

@media (min-width: 1000px) {

/* CSS styles for viewports 1000px and up */  

} 
@media screen and (min-width: 768px) {
/* set the width and height */
 }

Upvotes: 1

Related Questions