Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #472127

    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

    #472188

    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; }
    }
    
    #472225

    Hey!

    Please refer to @begrafiks’ post above.

    @begrafiks
    Thanks :)

    Regards,
    Yigit

    #472675

    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;}
    }

    • This reply was modified 9 years, 4 months ago by rdswestnet.
    #472926

    Hey!

    Thanks for sharing that, please let us know if you should need any more help on the topic.

    Regards,
    Rikard

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.