Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 28, 2018 at 11:42 am #1038438
    trojina

    Hello,

    I have a problem of making the caption text display on hover over images responsive. I have tried using several Quick CSS options already suggested in similar queries in your support section, but none seem to work.

    Basically, I want to make the overlay text size adjust to the available image container size, i.e. on smaller screens, tablets and mobiles.

    November 28, 2018 at 12:56 pm #1038478
    Victoria

    Hey Iztok,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.av-image-caption-overlay-center p:first-child,
.av-image-caption-overlay-center p  {
    font-size: 14px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    November 28, 2018 at 1:10 pm #1038492
    trojina

    Many thanks, this significantly improved the situation. The problem is that now the font is a bit small on large screens – from css I understand that the font size is determined in advance. So it cannot be made responsive, i.e. if the container is too small the size adapts (and only in the containers where this is necessary)?

    By the way, I had to paste it into custom.css, not in Quick CSS.

    November 29, 2018 at 10:11 am #1038860
    Rikard

    Hi,

    You can use media queries to target different screen sizes, like this to target mobile screens only:

    @media only screen and (max-width: 767px) {
.av-image-caption-overlay-center p:first-child,
.av-image-caption-overlay-center p  {
    font-size: 14px;
}
}

    Best regards,
    Rikard

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