Hello
the page is here: http://www.edswaterproofing.com/eds_wp_new_site_here/ please check out the 3 images in center – on hover the text is skewed to the right. If I put the same element on the page not contained in a column, such as the larger image below the 3 images, the text centers correctly. How can I get the text centered in the 3 smaller images?
Thanks
Hi rdswestnet;
I think it happens because of “padding” and “font size”.
try to add theses lines into your custom css file or the quick CSS area :
/* Mobile Styles ================================================== */
@media only screen and (max-width: 990px) {
.av-image-caption-overlay-center{
padding: 0px 0.5em;
font-size: 24px; }
}
Thanks for that. I elaborated slightly. With font size set to 32px in the element and the code below font size and centering will be good on every size device I can think of.
@media only screen and (max-width: 420px) {
.av-image-caption-overlay-center{
padding: 0px 0.5em !important;
font-size: 24px!important;}
}
@media only screen and (min-width: 768px) and (max-width: 800px) {
.av-image-caption-overlay-center{
padding: 0px 0.5em !important;
font-size: 18px!important;}
}
@media only screen and (min-width: 801px)
{
.av-image-caption-overlay-center{
padding: 0px 0.5em !important;
font-size: 24px!important;}
}