Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 3, 2015 at 12:22 pm #529126
    jdelgadoesteban

    Hi, we were wondering if there is any way around this issue we are experimenting with the title and description on the slideshow overlay text on mobile devices would break,many thanks in advance!

    http://www.theukwaterpartnership.org

    Cheers

    Javier

    November 3, 2015 at 3:49 pm #529353
    Elliott

    Hey jdelgadoesteban!

    They are not “breaking” on my end but at the lowest screen size they are moving up into the top part of the slideshow.

    Are you wanting to reduce the font size on smaller screens? Try adding this to a codeblock element in the page.

    @media screen and (max-width: 400px){
.avia-caption-title { font-size: 14px !important; }
.avia-caption-content { font-size: 12px !important; }
}

    Cheers!
    Elliott

    November 3, 2015 at 5:46 pm #529512
    jdelgadoesteban

    Elliot, thanks for that, yes you are right the text doe snot break but it makes it unreadable so I will try your suggestion and let you know.

    Cheers

    Javier

    November 3, 2015 at 6:21 pm #529544
    jdelgadoesteban

    Hi, I was not sure what you did mean when you said “adding this to a code block in the page” maybe you can elaborate a bit more?

    I have added to the QUICK CSS box under GENERAL STYLING but I am not sure if it has made any difference.

    Cheers

    Javier

    November 4, 2015 at 9:11 am #529797
    Rikard

    Hi,

    You can drag a code block element (content elements tab) to the page in question and add the following to it:

    <style>
@media screen and (max-width: 400px){
.avia-caption-title { font-size: 14px !important; }
.avia-caption-content { font-size: 12px !important; }
}
</style>

    Thanks,
    Rikard

    November 9, 2015 at 3:49 pm #532676
    jdelgadoesteban

    Rikard, thanks for that, OK I’ve got it now.

    Cheers

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Overlay text on homepage slideshow on mobile devices’ is closed to new replies.