2

Hello StackFlow community,

I wanted to zoom all the elements of my website for bigger resolutions

So I wrote this code:

@media screen and (min-width: 1368px) {
    html {zoom: 110%;}
}
@media screen and (min-width: 1640px) {
    html {zoom: 120%;}
}
@media screen and (min-width: 1846px) {
    html {zoom: 135%;}
}

It works great generally, except some minor details that do not behave as I would like.

One of them is the plugin MailMunch : Scrollbox (highlighted in green in my image) It acquired a huge shift (represented by the red arrow)

In default mode, it was displaying in bottom right corner, now it goes way to the top and it's impossible to read the whole of it.

enter image description here

Bad news for that: I can't play with the CSS since I am in free mode, and it's a dynamic element I can't force custom CSS through my theme.

Would you have any advice regarding this issue?

Either playing with my code on selectors HTML, either playing somehow on this scrollbox?

URL is: https://osezrealiservosreves.com/esprit-critique-koober/

Your help would be greatly appreciated, thanks :)

Pascal
  • 119
  • 9
  • So you installed a plugin on your own site? Why can't you fiddle with the css? You can just add your own styles which override the default styles, right? – giorgio Jun 05 '18 at 10:51
  • Can you please show the code of the plugin you installed? – billy.farroll Jun 05 '18 at 10:52
  • giorgio exactly this is a WordPress plugin, but I do not have custom CSS for this plugin in freemode. Sometimes I can write custom CSS on my theme and act on the selectors of some plugins, but for this one I can't – Pascal Jun 05 '18 at 10:52
  • There is no code for the plugin, it's just a WordPress plugin and I have no access to it in free mode. You can still see the plugin displaying at this URL: https://osezrealiservosreves.com/esprit-critique-koober/ – Pascal Jun 05 '18 at 10:53
  • 3
    _“Would you have any advice regarding this issue?”_ - only rather off-topic one … that this: _“I wanted to zoom all the elements of my website for bigger resolutions”_ is not the right approach to responsive websites to begin with. – CBroe Jun 05 '18 at 10:56
  • 3
    It's worth noting that `zoom` is not the standard CSS property, it was a proprietary addition to CSS by Microsoft somewhere in the end of 90s and was then adopted by WebKit/Blink browser engines (with their own understanding how it should work). Firefox has never supported it (https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom#Browser_compatibility), and the CSS Device Adaptation spec draft allows it only for the `@viewport` rule, not for HTML elements. – Ilya Streltsyn Jun 05 '18 at 11:03
  • Okay, then which other way could I have to do this "zoom effect" without using this property? – Pascal Jun 05 '18 at 11:06
  • increase element widths/heights for bigger resolutions , basically change the css for elements you wish to look bigger – Pol Lluis Jun 05 '18 at 11:09
  • 1
    why not use transform: scale instead of zoom - https://stackoverflow.com/questions/1156278/how-can-i-scale-an-entire-web-page-with-css#answer-17408949 – Pete Jun 05 '18 at 11:10
  • yes but it would apply the transformation for the plugin scrollbox as well, so it does not resolve my issue – Pascal Jun 05 '18 at 11:34

0 Answers0