Sense Theme Mobile Layout

Shopify Discussion
, , ,
1

Hello everyone!

I am currently using the sense theme for my store and although the hero section looks good on the desktop version, the mobile doesn’t look as good. The purple text box needs to be higher, as shown in the image below. Can you help me with that, so the desktop version stays the same and only the mobile version changes?

Снимок экрана 2026-06-13 113702
Снимок экрана 2026-06-13 113702758×1422 168 KB

Thanks in advance!

2

Hey @Jas0n

Is your Sense theme currently in draft? If yes, then share the preview URL of the draft theme so I can have a look.

Best,
Moeed

3
  1. Go to your Shopify Admin > Online Store > Themes and click Customize on your active Sense theme.
  2. Toggle the Mobile View icon at the very top right of the screen so you can see the changes happen live.
  3. On the left sidebar, click directly on your Image with text section.
  4. In the settings panel on the right side, scroll all the way down to the bottom until you see the Mobile Layout settings.
  5. Uncheck the option that says Show container on mobile (or remove the extra mobile padding setting if available).
4

Hello, would you mind to share your store url along with the password (if it’s password protected)?

5

Nina’s Home – Nina’s Home

thepro - password

6

Hey @Jas0n

Add this CSS in the Custom CSS option of hero section in the theme editor

@media screen and (max-width: 767px) {
.image-with-text__text-item.grid__item {
    margin-top: -50% !important;
}
}

NOTE: Increase or decrease that 50% value to move the text box up and down
RESULT:

image
image344×556 82.2 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

7

Thanks.

I tried to chage the %, but it was the same or too high. Nothing inbetween for some reason.

Anything else?

9

Hi there! Your site design is looking great, and this is a very common tweak for the Sense theme.

To move that text box higher only on phone screens, you just need to pull it upward using a negative margin. Open your theme editor, click directly on that specific “Image with text” section on the left menu, and scroll down to the very bottom on the right side until you find the Custom CSS box. Paste this small code in there:

codeCSS

@media screen and (max-width: 749px) {
  .image-with-text__text-item {
    margin-top: -120px !important;
  }
}

Because this code is wrapped in a mobile query, it will completely ignore your desktop layout and only change the mobile view. You can easily change the -120px number to something higher or lower until the box hits that exact level you marked in your photo.

Hope this helps!

10

Hello @Jas0n

You can adjust the position of the text box on mobile only by adding a small CSS snippet.

  1. Go to Online Store → Themes → Edit Code.

  2. Open Assets → base.css.

  3. Scroll to the very bottom of the file.

  4. Paste the following code:

@media screen and (max-width: 749px) {
   .image-with-text__text-item.grid__item {
       margin-top: -105px !important;
   }
}
  1. Save the file and refresh your storefront.

This will move the text box higher on mobile devices while keeping the desktop layout unchanged.

Also, I have a suggestion for your store. If you’re looking to create more advanced, responsive hero sections with animations, sliders, or interactive content without relying on custom CSS, you may want to check out the Slider Revolution & Sections app. It offers a powerful visual editor to build responsive hero sections, sliders, banners, and landing pages with ease.

I hope this helps! If you run into any issues while applying the code, feel free to reply here, and I’ll be happy to help.