• Hi,

    My site is mmjmenumanagers.com and I’m having trouble finding a way to make my hero (header) image responsive for mobile.

    Currently my header is an image with text ON the image, no html, which is why the sizing is messed up on mobile.

    What do you suggest is my best option for making both the image and text-size responsive on mobile?

    Thank you in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Instead of making the text be part of the image, why don’t you try using an image as the only slide in the header slider (instead of a header image) and adding the text using the slide’s title & subtitle fields?

    Thread Starter milligan45

    (@milligan45)

    Thanks for the suggestion, and it’s an option I’ve considered.

    BUT (and being the amateur that I am, I don’t know how to make this a reality), I would want only ONE image in the slider, and I don’t see an option in the slider customization for making it so it doesn’t slide at all (hence it’s not a slider).

    Secondly, would I be able to add custom CSS to the title and subtitle fields of my slider image even if I managed to make it so there’s only one image?

    If that’s my only option, I’m willing to take it (even without custom CSS), but I’d need some help figuring out how to make it so there’s only one image in the slider carousel, and there’s no actual slide effect that happens?

    Thanks!!!

    Go to Appearance → Customize → Header Area → Header Slider. If there’s a default SECOND slide, click the REMOVE button to eliminate it. For the FIRST slide, set your image, the title, and subtitle. At the top, set the slider speed to zero (0). It doesn’t seem to matter if Stop the Text Slider is checked or not. You should be able to style the title & subtitle using CSS.

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

The topic ‘How to make header image mobile responsive’ is closed to new replies.