Seperate Image with Text on mobile and desktop

Store Design
, ,

Topic summary

A user wants to display different “Image with Text” sections on mobile versus desktop versions of their Shopify store, similar to how they previously handled slideshows using CSS media queries.

Initial Approach:

  • The user successfully used CSS with @media (max-width: 749px) to hide/show different slideshows but couldn’t adapt this method for Image with Text sections.

Solution Provided:

  • Create two separate Image with Text sections (one for mobile, one for desktop) and publish both.
  • Add custom CSS code to the theme.liquid file (above the </body> tag) that uses media queries to control visibility:
    • First section displays on mobile only
    • Second section displays on desktop only

Outcome:

  • The solution worked successfully for the user’s homepage sections.
  • While the user initially preferred adding code via the custom CSS panel (shown in attached screenshot), they accepted the theme.liquid approach as effective.

The discussion is resolved with a working implementation.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi, I am looking for a way to have two different Image with Text sections on the mobile and desktop version of my website. I’ve done the same with a slideshow by adding a custom CSS to two different slideshows. The custom CSS for the slideshow is:

@media (max-width: 749px) {
slideshow-component {
display: none !important;
}
}

But I don’t know how to change the code to be applicable to the image with text section.

1 Like
2

hello @antoniamartina

I can help you, please tell me the complete code of that section, I will fix it.

thanks

3

Hey @antoniamartina

Just simply create two sections, one for desktop and one for mobile and keep them published and once that’s done then share your store url and password if enabled then I can provide you a code.

Best Regards,

Moeed

4

Hi, the website is martinamaria.nl

I published both sections and have no password. My question is about the last two image + text section at the bottom of the homepage

1 Like
5

Hey @antoniamartina

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 tag

NOTE: The first one will display for mobile and the second one will display for desktop.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

6

I was actually hoping for a code to put in the custom CSS in the picture added. But this worked! So thank you very much!

Schermafbeelding 2025-03-10 130138.png
Schermafbeelding 2025-03-10 130138.png2106×1236 231 KB

1 Like
7

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.