Hi, folks
I think I brought this up previously, and thought it was sorted. But the fix I did previously seems to not work now.
Essentially, with Chrome/Windows11, if I increase the system font to something like 118% for accessibilty on my high dpi display, this actually increases the font size in slider breaking layout; this is with ‘zoom’ at 100%.
Previously, I was able to set back to 100%, clear browser cache, set back to 118% and would not have the problem. However, it does not seem to work now, and most folk would not think to do that and just see something kinda funky.
I believw it’s this element, which looks to have a pixel size of 24px — would changing to ’em’ help with this, or some kind of wrap element in CSS?
code
<div class="slide-meta "><h2 class="entry-title td-module-title">
e.g., screencap
NewYorkNetwire.com/temp/temp052324.png
This is on our test site double checking all our mods, and custom code, and plugins work with PHP 8.2x before we start to deploy on our oooold sites to upgrade from PHP 7.2x. Live site, just not promoting it or updating it properly with main content at the moment until we double check all this kind of shenanigans. 🙂
Setting the Windows 11 > accessibility > font size back to 100% fixes it, but obviously a lot of folks with high dpi monitors have to increase the font size to actually use the internet now. The slider block seems to be the only element affected by this.
And yeah, many folks hate sliders. But, for our news portals we still like them as we can slide bwteen several featured items vs just having a single one, to keep featured items up top longer.
Thanks for any suggestions on fix!
Hi,
Hmm, normally there shouldn’t be a problem, we checked the demos to the live sound and everything seemed to be fine – https://i.imgur.com/iAlp9Gq.jpeg, but it is possible that this problem only occurs when monitors with a high resolution are used or some situation of this kind.
I’m glad you found the solution with “em” for fonts instead of “px”, from what I’ve seen this is a very used solution in adjusting the font according to the screen sizes. If this solution works well and only the slider block is affected, what I can suggest is: use a custom css that will apply only per slider to can adjust the size of fonts based on screen, here is a concept that can be used:
html { font-size: 62.5%; }
body { font-size: 1em;}
@media (max-width: 300px) {
html { font-size: 70%; }
}
@media (min-width: 500px) {
html { font-size: 80%; }
}
@media (min-width: 700px) {
html { font-size: 100%; }
}
@media (min-width: 1200px) {
html { font-size: 140%; }
}
Other suggestions are to try this:
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
I hope this will help!
How would I apply a fix only to the slider CSS itself and nothing else?
I have not tried anything like
.slide-meta h2 entry-title td-module-title {blah blah}
Weird it looks totally fine in td-composer view. I may just try to use a single image and retire the slider vs messing with it, so i can move on 🙂
Had changed the text to h2 from h3, tried changing back, but still breaks into the spacer area.
Hi,
For applying the css only on slider please try like this:
.td_block_slide .td-theme-slider.iosSlider-col-3 .td-module-title {
font-size: 48px;
}
I hope this will help you!
Hm. OKaaaay. So it looks like the zoom impacts the “size” of the element on Chrome/Windows with Windows accessibility stuff active. NOT Chrome zoom.
I got someplace with this:
@media (min-width: 700px) {.td_block_slide{max-width:95%}}
@media (min-width: 1000px) {.td_block_slide{max-width:639px;}}
so, argh. this fix seems to solve windows issue, but then on ipad portrait and landscape slider overall width now smaller.
not sure why older version of newsmag not affected by this…something to do with the structure and padding on either side of slider to fit in column in current code
will play with it more unless you have another suggestion…no other content blocks affected by this
Hi simchris, if the problem appears now only on ipad portrait and landscape slider, maybe it can be used a code per viewport something like this:
– https://pastebin.com/t3inHB9A
I hope it will help you!
Thanks; will futz with it a bit more.
Worst case, will see if I can do some kind of single image in the two column spot. Don’t recall if there is a single image block kind of like slider without the slide.
Stupid Windows 11. It’s the Windows 8 of modern era. Ugh.
ok… gave up on this. Going to use “wide” 2 image feature box across full menu width. Then the 2+1 layout below.
Thanks for help. Really bizarre thing. Something being ‘enlarged’ which shouldn’t in the 2 col layout.
Wheee!
Hi simchris I’m glad that you managed to resolve the situation!
Have a nice day!
