How to make header overlay text mobile responsive?

Forums » WordPress » Fluida » How To

  • Author
    Posts
  • April 30th, 2020 at 21:41 #102185
    amy_julian

    Hi! After some experimenting, I’ve finally been able to figure out how to make my header image mobile responsive. Yay! But now the overlay text is formatted weird – it stays very large on the mobile site. Is there a way to make this text scale with the image?

    Thanks so much!

    Website: amyjulian.com

    May 2nd, 2020 at 13:50 #102232
    Zed
    Cryout Creations mastermind

    The slider caption does shrink with screen size, just not enough for your site to make the text fit next to the person (the standard usage scenario we’ve designed the slider for is for the caption to go over all the image, not just part of it).

    You’ll need to shrink the text further to make it fit on the smaller screens:

    @media (max-width: 960px) {
  body .lp-staticslider .staticslider-caption { font-size: 0.7em; }
}
@media (max-width: 640px) {
  body .lp-staticslider .staticslider-caption { max-width: 50%; }
  body .lp-staticslider .staticslider-caption h2 { font-size: 2.7em; }
}
    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    May 3rd, 2020 at 21:13 #102296
    amy_julian

    That’s perfect!! Thank you so much!! You’re always so helpful 🙂

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘How to make header overlay text mobile responsive?’ is closed to new replies.