Changes to text are not responsive (below 750px width) - Debut theme

Technical Q&A
1

Hi!

I made some changes to the text of a specific hero section. Concretely, I changed the color of the text and gave it a white background. The code I added to theme.css looks like this:

#shopify-section-16194524436c866472 .mega-title, #shopify-section-16194524436c866472 .mega-subtitle {
background-color: white;
}

However, as soon as I go below 750px width for the webpage all of my adjustments disappear and the original css returns.

How can I make such changes to the text responsive?

Thanks!

M

2

Hello

Try instead background-color:white!important;

Let me know if it works

3

Hi @Anonymous

Thanks, but this does not seem to solve the issue. Even with !important included the custom css disappears below 750px.

M

4

You need to add the responsive media query as well. Add this at the end of your file:

@media only screen and (max-width: 750px) {
#shopify-section-16194524436c866472 .mega-title, #shopify-section-16194524436c866472 .mega-subtitle {
background-color: white;
}
}
5

Hi @g33kgirl

Actually, this removed the white background everywhere because it limited the white background only to a screen width below 750px, but at the same time there is this issue that this custom css is removed below 750px for some reason. So now, there is no white background also for a wider screen.

Thanks,

M

6

@MRami Can you please share your website url?

7

If you didn’t remove the code you added, this should have worked. Your code should have looked something like this (if the code is still being overridden, you can add the !important tag):

#shopify-section-16194524436c866472 .mega-title, #shopify-section-16194524436c866472 .mega-subtitle {
background-color: white !important;
}

@media only screen and (max-width: 750px) {
#shopify-section-16194524436c866472 .mega-title, #shopify-section-16194524436c866472 .mega-subtitle {
background-color: white !important;
}
}
8

Hi @g33kgirl ,

Thanks, I understand, but the second part doesn’t seem to work. If I go below 750px width for the page, then this custom css disappears (no white background anymore for the text).

The link to my store is: https://ston-skin.myshopify.com/ with PW: eanien

See printscreen here:

750 px

MRami_0-1619527590011.png
MRami_0-1619527590011.png399Ă—197 63 KB

<750px

MRami_1-1619527589689.png
MRami_1-1619527589689.png400Ă—186 62.6 KB

Thanks!

9

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 749px){
#shopify-section-16194524436c866472 .mega-title , #shopify-section-16194524436c866472 .mega-subtitle {
background-color: #ffffff !important;
}
}
10

Hi @Kinjaldavra

Thanks, but this doesn’t seem to solve the issue. Below 750px the white background always disappears.

Is there something else I can do?

M

11

Try this:

#Hero-16194524436c866472.hero .mega-title, #Hero-16194524436c866472 .hero .mega-subtitle 
background-color: #ffffff !important;
}

@media only screen and (max-width: 750px) {
#Hero-16194524436c866472.hero .mega-title, #Hero-16194524436c866472.hero .mega-subtitle  {
background-color:  #ffffff !important;
}
}
12

Hi @g33kgirl ,

This works for >750px, just like the other one, but when I go below 750px the white background disappears.

Is there another solution?

Thanks!

13

Thanks @Kinjaldavra and @g33kgirl ,

There was a bracket not closed in the code above. :slightly_smiling_face:

This solution works!

M