CODEWITHSUNDEEP
htmlcssscale
robuh
robuh

Reputation: 61

Site display problems when zooming in the browser

I got a problem on a website http://madamrimma.by/, when browser scale is less then 100%, the website is displaying incorrect: http://joxi.ru/qlrGUhjKTJBMAUGBReA. This website is not created by me and i don't understand how it happened.

Upvotes: 0

Views: 783

Answers (3)

robuh
robuh

Reputation: 61

I use this media quires:

/* Mobile styles go first, without media 
queries. */
@media only screen and (min-width: 321px) {
/* Larger mobile styles (wider than 320 
pixels) */
}
@media only screen and (min-width: 600px) {
/* Tablet styles (wider than 600 pixels) 
*/
}
@media only screen and (min-width: 1024px) {
/* Large laptop styles (wider than 1024 
pixels) */
}
@media only screen and (min-width: 1140px) {
/* Desktop styles (wider than 1140 
pixels) */
}

for each resolutions and it works.

Upvotes: 0

Yong Jie Wong
Yong Jie Wong

Reputation: 2131

This is because downscaling the browser actually increases the width of the page in pixels. While the browser may occupy say, 1024px, when the page is downscaled, the number of pixels as represented in the DOM is actually more than 1024px.

Additionally, there are media queries that control the appearance of the page. If you look at #wrappen, the following CSS exists:

@media (max-width: 1920px) and (min-width: 1025px)
#wrappen {
    width: 1170px;
    margin: 0 auto;
    box-shadow: 0 0 20px #f25aeb;
    background: #fff;
}

When you downscale your browser, the number of pixels as represented in the DOM is more than 1920px. Hence, the fixed-width layout imposed by #wrappen is ignored, and the layout breaks.

If you have an extremely high-resolution monitor, you can also resize your browser window beyond 1920 pixels and have the same effect.

The Fix

The fix for this is easy. Simply remove the offending max-width media query. Of course, this is not optimal for high resolution screens, as most space is wasted, but at least the layout does not break.

Removed Media Query

Resultant Page

Upvotes: 2

Harish Kotra
Harish Kotra

Reputation: 169

The main problem is having fixed widths to the div elements in the code. Change them to %'s so that it will be fixed. Every element should be center aligned.

Upvotes: 0

Related Questions