Hello,
I have some text in a grid that I cannot figure out how to resize for smaller screens.
The site is here: http://wordpress-90648-281339.cloudwaysapps.com/
The text in question is “This is more text under the headline explaining many important points for the viewer.” (see https://prntscr.com/frwfce)
I cannot figure how to make that text smaller once you reach mobile size. It works on Safari Desktop (macOS) but not Safari iOS or Chrome.
Here’s the media query which is working for other parts of the grid, but not that element:
//
/* Screen size from 0 to 510px, such as mobile */
@media screen and (max-width: 510px) {
//
/* Title text for some of the grid boxes */
.esg-top { font-size:20px !important; }
/* Title text for the Text only NL skin */
.eg-nl-skin-text-element-3
{ font-size:20px !important; } */
/* Title text for the Text & Excerpt skin */
.eg-nl-skin-title-and-text-element-3
{ font-size:20px !important; }
/* Excerpt text for the Text & Excerpt skin */
.eg-nl-skin-title-and-text-element-11
{ font-size:14px !important; line-height: 14px !important; }
}
//
/* Screen size from 511 to 800px, such as mobile */
//
@media screen and (min-width: 511px) and (max-width: 900px) {
/* Title text for some of the grid boxes */
.esg-top { font-size:22px !important; }
/* Title text for the Text only NL skin */
.eg-nl-skin-text-element-3
{ font-size:22px !important; } */
/* Title text for the Text & Excerpt skin */
.eg-nl-skin-title-and-text-element-3
{ font-size:22px !important; }
/* Excerpt text for the Text & Excerpt skin */
.eg-nl-skin-title-and-text-element-11
{ font-size:18px !important; line-height: 18px !important; }
}