Full width on mobile

Store Design
1

I want to make the top ‘image with text overlay’ full size on mobile

2

Hey @Johnnycrev

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
section#m-hero-section-template--24499071582586__image_with_text_2_pAqrLL .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
</style>

RESULT:

image
image352×759 75.1 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

You can make the Image with Text Overlay section span full width on mobile by adding a bit of custom CSS. In your Shopify Admin, go to:
Online Store → Themes → Edit code → Assets → base.css (or theme.css depending on your theme) and add this at the bottom:

@media screen and (max-width: 749px) {
.image-with-text-overlay {
width: 100% !important;
max-width: 100% !important;
}

.image-with-text-overlay img {
width: 100% !important;
height: auto !important;
object-fit: cover;
}
}

This forces the section and the image to stretch to full width on smaller screens while keeping proportions clean.

If your theme uses a different section handle, just inspect the section with your browser dev tools and replace .image-with-text-overlay with the exact class.

That should give you the full-size look you’re after on mobile.