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

[MRami]

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

[Kinjaldavra · Accepted solution]

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;
}
}

[Anonymous]

Hello

Try instead background-color:white!important; 

Let me know if it works

[MRami]

Hi @Anonymous 

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

M 

[g33kgirl]

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;
}
}

[MRami]

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

[g33kgirl]

@MRami Can you please share your website url?

[g33kgirl]

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;
}
}

[MRami]

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

<750px

Thanks!

[Kinjaldavra · Accepted solution]

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;
}
}

[MRami]

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

[MRami]

Thanks @Kinjaldavra and @g33kgirl, 

There was a bracket not closed in the code above. 🙂 

This solution works!

M

[g33kgirl · Accepted solution]

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;
}
}

[MRami]

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!