Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 19, 2023 at 1:55 pm #1428499
    antdesign01

    Hi! I’ve got a curly one that for some reason I just can’t figure out… I have applied the following style to my images (link to dev site below). The style is perfect on desktop, but on mobile devices it doesn’t show at all. I can’t work out what I am missing… are you able to assist?

    /*—————————————-
    // Image Overlay Title Text
    //————————————–*/

    .av-image-caption-overlay {
    text-align: left !important;
    }
    .av-image-caption-overlay-center {
    vertical-align: bottom !important;
    }
    .av-image-caption-overlay-center p {
    padding: 20px 0 !important;
    }

    .av-image-caption-overlay-center p {
    font-weight: bold !important;
    text-transform: uppercase !important;
    }

    .grad-col .av-image-caption-overlay {
    border-radius: 20px !important;
    background: linear-gradient(0deg,rgba(0, 39, 87, 0.8), rgba(0, 39, 87, 0.1)) !important;
    }

    .grad-col img {
    border-radius: 20px !important;
    }

    • This topic was modified 11 months ago by antdesign01.
    December 20, 2023 at 3:50 am #1428551
    Ismael

    Hey antdesign01,

    Thank you for the inquiry.

    The styles are enclosed within a css media query for desktop view, which is why the styles are not applied on mobile view.

    @media only screen and (min-width: 989px) {

}

    If this wasn’t intentional, ensure that the css rules and other media queries are correctly closed.

    Best regards,
    Ismael

    December 20, 2023 at 6:49 am #1428561
    antdesign01

    Hi Ismael,

    Thank you for your response, I have looked at the code and “@media only screen and (min-width: 989px) { }” is not included in that block at all. Are you saying that I need to include that block to have them work with mobile devices (so have the css added twice, once with that reference?).

    December 20, 2023 at 10:30 am #1428577
    Rikard

    Hi,

    I’m seeing the same thing as Ismael, your styles seems to be in a media query. If you need further help with this, then please post admin WordPress login details in private.

    Best regards,
    Rikard

    December 20, 2023 at 12:33 pm #1428591
    antdesign01

    Hi Ismael and Rikard, shared credentials herewith. Please let me know where I’ve gone wrong so that I can ensure to learn from the mistake.

    Thank you!

    December 20, 2023 at 3:46 pm #1428611
    Rikard

    Hi,

    Thanks for that. This media query doesn’t seem to be closed:

    @media only screen and (min-width:989px) {
.phone-info { font-size: 14px; padding-top: 20px; padding-bottom: 20px; padding-right: 100px;}

    Best regards,
    Rikard

    December 20, 2023 at 10:36 pm #1428631
    antdesign01

    Hi Rikard, Wow. It would have taken me ages to find that error as that css is totally unrelated to the part I was working on… thank you so much, that looks like it’s fixed the issue!

    December 21, 2023 at 2:49 pm #1428663
    Rikard

    Hi,

    Great, I’m glad that we could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    December 21, 2023 at 2:55 pm #1428665
    antdesign01

    Yes, please close this thread. Cheers for the help.

    December 21, 2023 at 4:34 pm #1428678
    Rikard

    Hi,

    Thanks for letting us know, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Image and Caption Styling not working on mobile devices.’ is closed to new replies.