How to make header overlay text mobile responsive?

  • Author
  • #102185

    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!


    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
    Please check the available documentation and search the forums before starting a topic.

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

Viewing 3 posts - 1 through 3 (of 3 total)

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