Zoom problem?

[dariusthebaws]

Hello guys, I have a problem with my webpage, it goes crazy when I try to zoom :))… I made the page kinda responsive using css grid (it was the first time when I used that) but now I am getting very frustrated because I cannot zoom without messing up the whole page, divs, layouts, design etc :)).

You can see here what I am talking about:

Zoom problem on responsive html webpage

thank you

-html-
https://justpaste.it/20okx

-basic.css-
https://justpaste.it/619sw

-index.css-
https://justpaste.it/3cgjx

[PaulOB]

Hi,

Can you set up a codepen or similar as the code you supplied doesn’t give me anything like the display you are showing in your video? Until we have a replica of your layout we will not really be able to offer any proper help.

If I might make a few simple observations first though:

Zoom is meant to aid the readability of text but there is no guarantee that exorbitant zoom settings will not break any layout. You seem to be zooming up to 250% which is unrealistic and I’m not sure why you are doing that. Most sites will break after a few zooms but still be usable. Exorbitant use of zooming will kill most sites or render them impossible to use.

Note that some users will only zoom text anyway and not the whole layout.

If you have fixed width containers (px or em etc but ,not percent) then the container will grow with zoom and the layout gets bigger.
On auto sized or percentage size containers the container will not grow bigger than the viewport or the percentage set.

It looks as though you are trying to make a page that is only viewport height and width. This of course means that once you zoom the content it will have nowhere to go as there will be less room for everything.

You have many errors in your CSS so a trip to the validator is required. You have logic errors in your code also and some rules that don’t really make sense. You seem to be mixing grid and flex and if this following rule is a good example of grid layout then shoot me now

	grid-template-areas:
"cap1 cap1 nmc1 logo logo logo logo logo logo nmc2 cap2 cap2" "cap1 cap1 nmc1 logo logo logo logo logo logo nmc2 cap2 cap2" 
"cap1 cap1 nmc1 logo logo logo logo logo logo nmc2 cap2 cap2" "stg stg meniu meniu meniu meniu meniu meniu meniu meniu drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "nmc5 nmc5 nmc30 jos jos jos jos jos jos nmc31 nmc7 nmc7";

Looking at your video it looks to me as though you only need two rows of 3 for the grid layout then everything else can be flex or other css.

What are all the empty divs in your code?

  <div class="stanga"></div>
  <div class="dreapta"></div>
  <div class="trup"></div>
  <div class="cap1"></div>
  <div class="cap2"></div>
  <div class="nimic1"></div>
  <div class="nimic2"></div>
  <div class="banner" id="umbra"></div>
  <div class="nimic31"></div>
  <div class="nimic30"></div>

I assume they are images or something but without a working example its hard to know what they are.

You are using the css grid layout which is the most advanced layout tool in the css arsenal and then you go and do this as well.

<font color="#856514"; style="Corbel; 14pt;">

That code is from last century and should not be in a web page these days.

Lastly what did you expect or want to happen when you zoomed? If you wanted the whole layout to scale then you probably need to design an adaptive layout using em which is effectively a series of fixed widths adjusted by media queries.