Text below hero image with text on mobile

[nicolapaul82]

I am using Foodie theme and cannot get my hero image with text block to show with the text above the image on my mobile site. Website homepage is aeble.co.uk, any help with css would be appreciated! 

[rajweb]

Hey @nicolapaul82 ,

To adjust the hero image text block so it displays above the image on mobile, try adding this CSS to your theme. This CSS should be placed in your theme’s theme.css or base.css file:

@media only screen and (max-width: 768px) {
  .hero-section-class { /* Replace .hero-section-class with the actual hero section class */
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }
}

If you’re unsure of the exact class name for your hero section, you can inspect the hero image element using your browser’s developer tools (right-click the element, choose “Inspect”), and look for the class assigned to the hero section container. Replace.hera-section-class with the appropriate class name.

Let me know if you’d like help with any specific class names or additional customizations!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[mrashid · Accepted solution]

@nicolapaul82 

@media only screen and (max-width: 768px) {
.global__section.section-text-with-image.text-with-image-template--23731367739767__162610788017d9cfdd.py0.mt0.pb0.no-section-animation .grid__wrapper {
    display: flex;
    flex-direction: column-reverse;
}
}

[nicolapaul82]

Worked perfectly, thanks!