remove text boxes from mobile view but not desktop

Store Design
,
1

Hi,

I am using the Dawn theme (15.3.0) and wondered if anyone could help with a custom code to remove something from being shown on a mobile device but keep them live on desktop, is this possible?

I have attached pdf showing the 5 text boxes, first image in pdf is desktop and second is view on a mobile.

my website url is - thescentedmeltshop.com and password is: shop90

Many thanks,

Sam

2

Hey @samr66 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media screen and (max-width: 749px) {
  .multicolumn-list > li:nth-child(2),
  .multicolumn-list > li:nth-child(4) {
    display: none !important;
  }
}
3

Hi,

I have added the code to the base.css file but unfortunately it didn’t work.

thank you

4

CodingFifty_0-1750192397003.png
CodingFifty_0-1750192397003.png580×310 67.6 KB

5

Hide the entire section (with the 5 boxes) on mobile devices

@media screen and (max-width: 749px) {
  .section-template--18254185889958__multicolumn_GyxMR7-padding {
    display: none !important;
  }
}
6

I’ve just updated the code and its hidden all 5 now, thank you for all your help!

7

Hey Sam!

Yes, absolutely possible! You can hide those text boxes on mobile while keeping them visible on desktop using CSS media queries. Here’s how:

Solution: Add mobile-specific CSS

  1. Go to Shopify Admin → Online Store → Themes → Actions → Edit Code
  2. Find assets/base.css or create a new file called custom.css in the assets folder
  3. Add this code:
/* Hide text boxes on mobile devices */
@media screen and (max-width: 749px) {
  .rich-text,
  .rich-text__wrapper,
  .rich-text__blocks {
    display: none !important;
  }
}

/* If the above doesn't target the right elements, try this more specific approach */
@media screen and (max-width: 749px) {
  .section-rich-text {
    display: none !important;
  }
}

If you created a new CSS file, you’ll also need to include it in your theme:

  1. Open layout/theme.liquid
  2. Add this line in the section:
{{ 'custom.css' | asset_url | stylesheet_tag }}

The max-width: 749px targets mobile devices, and Dawn theme typically uses this breakpoint. The !important ensures it overrides any existing styles.

Test it: Save the changes and check your site on mobile - those text boxes should now be hidden on mobile but still visible on desktop!

Easier alternative: If you plan on making more mobile-specific changes or want a visual way to handle this, I built an app called Easy Edits that lets you create separate edits for mobile and desktop views. You could easily hide those text boxes on mobile with just a few clicks, no code needed!

Let me know if this works for you or if you need help targeting different elements!