-
AuthorPosts
-
April 26, 2018 at 3:05 pm #947311
Hello,
I am using an extra wide monitor at home (3440×1440 px),
and I noticed that often images look blurry and stretch differently on Enfold.if I resize the browser to a normal ratio as if it was a regular monitor, everything looks fine,
However I wonder if that’s fixable, since many around the world also have the extra-wide monitors.Examples:
normal view: https://www.dropbox.com/s/5zbjcdhxd24vba4/wide3.jpg?dl=0
when browser is full screen: https://www.dropbox.com/s/ats1j75tchx2rda/wide2.jpg?dl=0
https://www.dropbox.com/s/0ifm5rglr0v4jwq/wide1.jpg?dl=0What can be done?
Thanks in advance,
Elad.April 27, 2018 at 11:24 am #947846Hey VJLoops-GT,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaApril 27, 2018 at 11:31 am #947855April 30, 2018 at 8:43 am #948855Hi,
Set a maximum width so it doesn’t stretch with the viewport.
@media only screen and (min-width: 1920px) { .responsive body #wrap_all { max-width: 1920px; margin: 0 auto; } #header { max-width: 1920px; } }
Best regards,
IsmaelMay 2, 2018 at 10:47 am #949942Hello Ismael,
Thank you for your answer.
When I use this code, the sides of the page seem gray, how can I change that?
https://www.dropbox.com/s/s0nr3se0p4eepn0/Screenshot%202018-05-02%2010.46.57.png?dl=0Thanks again,
Elad.May 3, 2018 at 9:36 am #950590Hi Elad,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
html { background-color: #fff; }
If you need further assistance please let us know.
Best regards,
VictoriaMay 10, 2018 at 2:43 pm #954585Hello again,
sorry for the delay.Sadly this solution doesn’t work properly.
Check out the differences between the look of the slider in a normal monitor, and with these CSS changes applied in an extra wide monitor:
normal ratio res: https://www.dropbox.com/s/ti2y6n8g4cw72js/monitor-normal.jpg?dl=0
extra wide res: https://www.dropbox.com/s/8to8lhkz2knqcx7/monitor-extrawide.jpg?dl=0Thanks again,
Elad.May 11, 2018 at 9:23 am #955109Hi Elad,
That is a different issue.
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaMay 11, 2018 at 9:27 am #955111Hello Victoria, how are you?
No problem at all:
// Use private field
I tried the code you offered before on other websites I have running Enfold and the result is the same..
The images in the slider get stretched in extra-wide monitors and the code won’t keep the ratio the same way.thank you Victoria,
Have a lovely day,
Elad.May 14, 2018 at 6:53 am #956266Hi,
Did you remove the previous css code? Please add it along with @Victoria’s code. The first css code will limit the width of the main and header container to 1920px. The second one will set the background of the html document to white or #ffffff.
Best regards,
IsmaelMay 15, 2018 at 8:47 am #956853Hey Ismael,
I used both codes.The result is as I attached in my last msg…the frame is indeed limited to 1920px,
but the slider doesn’t show the content correctly…as you can see before.normal ratio res: https://www.dropbox.com/s/ti2y6n8g4cw72js/monitor-normal.jpg?dl=0
extra wide res: https://www.dropbox.com/s/8to8lhkz2knqcx7/monitor-extrawide.jpg?dl=0(both examples are with both codes)
Thanks,
Elad.May 15, 2018 at 3:30 pm #957042Hi,
Thanks for the update. What is the login url? I tried “wp-admin” and “wp-login” but those pages don’t exist.
Best regards,
IsmaelMay 15, 2018 at 3:34 pm #957043This reply has been marked as private.May 18, 2018 at 6:14 am #958438Hi,
There was an invalid css code in the Quick CSS field. We fixed that and added the suggested css codes.
Screenshot: https://imgur.com/a/sqWB4g5
Best regards,
IsmaelMay 18, 2018 at 2:22 pm #958608Hello Ismael
That does not look correct….check out the location of the text on the slider…
originally – leftin your version : right
should look like this: https://www.dropbox.com/s/ti2y6n8g4cw72js/monitor-normal.jpg?dl=0May 18, 2018 at 2:23 pm #958609Moreover, check out the differences in the actual image crop that you see….
totally different area and zoom..it looks much better on the original and not with the CSS that limits the 1920..side by side comparison: https://www.dropbox.com/s/bggsmbz0y9qvqao/compare.jpg?dl=0
by the way, sorry for the long procedure, I appreciate you help and thanks in advance ! :)
- This reply was modified 6 years, 6 months ago by VJLoops-GT.
May 22, 2018 at 3:30 am #960100Hi,
We adjusted the css codes a bit.
@media only screen and (min-width: 1920px) { .responsive body #wrap_all { max-width: 1920px; margin: 0 auto; } #header { max-width: 1920px; } #top .avia-layerslider .ls-wp-container { width: 100% !important; } #top .avia-layerslider .ls-wp-container .ls-slide-backgrounds * { max-width: 100% !important; width: 100% !important; transform: translateX(0) translateY(0) !important; transition: none !important; } #top .ls-inner .ls-slide-transition-wrapper, #top .ls-inner .ls-slide-transition-wrapper * { width: 100% !important; max-width: 100% !important; transform: none !important; transition: none !important; } .ls-layers .ls-wrapper { transform: translateX(-600px) !important; } }
The background resize is quite normal because the size property is set to “cover”. You can adjust the settings in the Slider Settings > Default Options panel. We set it to “stretch”.
The last css declaration above took care of the layers’ position.
.ls-layers .ls-wrapper { transform: translateX(-600px) !important; }
Best regards,
IsmaelMay 22, 2018 at 9:27 am #960203Hey Ismael,
Thank you so much for the effort – I know it’s already getting further away from your support range, and I appraciate the help.
However for now I see that the display is still wrong, at least on my system.For example on the main page, on the normal ratio monitor- the image is stretched, the TV tower for example looks funny:
https://www.dropbox.com/s/tyh81vy6ylsbcgg/example1.1.jpg?dl=0Same for the extra wide monitor- stretched image and the hot-air balloons don’t appear correctly:
https://www.dropbox.com/s/xx88r9cprwgfd8l/example2.jpg?dl=0Then for the “Leistungen” page, the elements are way off – https://www.dropbox.com/s/eqtx8x0q8brazzk/example1.jpg?dl=0
I am afraid that in this way we are just complicating things and maybe better to revert the changes and hope most of my clients don’t have an extra wide monitor :):)
Thanks again in advance and have a lovely day,
Elad.May 25, 2018 at 2:50 pm #962160Hi,
I am afraid that in this way we are just complicating things and maybe better to revert the changes and hope most of my clients don’t have an extra wide monitor :):)
Yes, that’s probably the best thing to do. Besides, extra wide monitors are still not common nowadays. You can check the stats.
// https://www.w3schools.com/browsers/browsers_display.asp
// https://www.w3schools.com/browsers/browsers_resolution_higher.aspFor example on the main page, on the normal ratio monitor- the image is stretched, the TV tower for example looks funny:
That is because we set the background size to “stretch” instead of “cover”. You can set it back to “cover” or “contain”.
The background resize is quite normal because the size property is set to “cover”. You can adjust the settings in the Slider Settings > Default Options panel. We set it to “stretch”.
Best regards,
IsmaelMay 25, 2018 at 11:13 pm #962462Thank you very much Ismael – really appraciate your attention to detail and thank you for the resolution stats!
May 29, 2018 at 2:50 pm #963728 -
AuthorPosts
- The topic ‘Extra wide monitor size problems’ is closed to new replies.