Why isn't my custom CSS displaying on mobile devices?

Store Design
1

Hey there! I have some custom css at the bottom of my base.css file. I have the following code:

H1, H2 { font-family: “EDSMARKET”!important; }

.header__icon–search {
display: none;
}
.image-with-text.image-with-text–overlap .content-container:after {
background: white;
}
body .collapsible-row-layout .accordion summary,body .collapsible-row-layout .accordion .accordion__content, body .collapsible-content summary:hover {
background: #fff;
}
.gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0818/7789/3427/files/Stained_Glass_Pattern.jpg?v=1695568145) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: auto !important;
}
.image-with-text__content.image-with-text__content–top.image-with-text__content–desktop-left.image-with-text__content–mobile-center.image-with-text__content–adapt.content-container.gradient.color-background-1 {
background: white !important;
}
.image-with-text__media.image-with-text__media–adapt.gradient.color-background-1.global-media-settings.media {
background: white !important;
}

I have managed to figure out that this code is not displaying on mobile but it displays perfectly fine when viewed from a computer.

Anyone know how to fix this?

Link: https://6h8svyvu2aw96akp-81877893427.shopifypreview.com

2

Hi @WK100

Make sure you clear browser cache of your mobile to check and class of section in mobile is correct because I have check and see a line of code style using class of desktop section

Screenshot 2023-09-29 at 08.57.49.png
Screenshot 2023-09-29 at 08.57.49.png611×740 84.2 KB

3

I cleared the browser cache on my mobile phone and it is still displaying incorrectly.

Any other ideas of how to fix?

4

Hello @WK100 ,

You can add this code to make it display on mobile device:

Let me know if it works.

Ali Reviews.

5

I copied this code into the bottom of base.css and it isn’t working. Does this code need to go somewhere else?

Your Page Title H1, H2 { font-family: "EDSMARKET"!important; }

.header__icon–search {
display: none;
}
.image-with-text.image-with-text–overlap .content-container:after {
background: white;
}
body .collapsible-row-layout .accordion summary,body .collapsible-row-layout .accordion .accordion__content, body .collapsible-content summary:hover {
background: #fff;
}
.gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0818/7789/3427/files/Stained_Glass_Pattern.jpg?v=1695568145) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: auto !important;
}
.image-with-text__content.image-with-text__content–top.image-with-text__content–desktop-left.image-with-text__content–mobile-center.image-with-text__content–adapt.content-container.gradient.color-background-1 {
background: white !important;
}
.image-with-text__media.image-with-text__media–adapt.gradient.color-background-1.global-media-settings.media {
background: white !important;
}

6

So I coped that code above into theme.liquid and it is working except for the font style for H1 and H2. Anyone know why this would be?