How can I remove text and buttons on mobile using Flex theme?

Store Design
1

Hi, is there a way to remove text and buttons from the “Image with Text overlay” - on MOBILE only?

Is there a custom CSS code I can enter?

Using Flex theme from out of the sandbox

2

Hello @myrthe

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

3

Hi @myrthe

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file → Save

@media screen and (max-width: 767px){

.image-with-text__text.rte.body, a.button.button–primary {

display: none;

}

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

4

@myrthe

can you please share store url so i will check and let you know

5

Hello There,

Please share your store URL and Password.
So that I will check and let you know the exact solution here.

6

Hello there

To hide text on mobile devices only in a Shopify store using the Flex theme, you can use media queries in your CSS. Here’s an example of how you might do this:

  1. In the Shopify admin, go to the “Online Store” section and click on “Themes.”
  2. Find the Flex theme and click on the “Actions” dropdown, then select “Edit code.”
  3. In the “Assets” directory, find the “theme.scss.liquid” file and click on it to open it for editing.
  4. Add a media query at the bottom of the file to target mobile devices:
@media only screen and (max-width: 480px) {
  /* Add your mobile-specific styles here */
}
  1. Inside the media query, add a CSS rule to hide the text you want to hide on mobile devices. For example:
@media only screen and (max-width: 480px) {
  .hide-on-mobile {
    display: none;
  }
}
  1. To apply this rule to the text you want to hide on mobile devices, add the hide-on-mobile class to the HTML element containing the text. For example:
This text will be hidden on mobile devices
  1. Save your changes and refresh your store to see the text hidden on mobile devices.

hope this helps!