How to make header overlay text mobile responsive?

  • Author
    Posts
  • #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!

    Website: amyjulian.com

    #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.
    #102296

    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.