Solved

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

MRami
Excursionist
18 0 5

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

Accepted Solutions (2)
Kinjaldavra
Shopify Partner
2302 570 1422

This is an 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;
}
}

 

 

View solution in original post

g33kgirl
Shopify Partner
390 109 142

This is an 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;
}
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.

View solution in original post

Replies 12 (12)

Not applicable

Hello

 

Try instead background-color:white!important; 

 

Let me know if it works

 

 

MRami
Excursionist
18 0 5

Hi @Anonymous 

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

g33kgirl
Shopify Partner
390 109 142

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;
}
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
MRami
Excursionist
18 0 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

 

g33kgirl
Shopify Partner
390 109 142

@MRami Can you please share your website url?

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.

g33kgirl
Shopify Partner
390 109 142

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

 

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
MRami
Excursionist
18 0 5

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

<750px

MRami_1-1619527589689.png

Thanks!

 

Kinjaldavra
Shopify Partner
2302 570 1422

This is an 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
Excursionist
18 0 5

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
Excursionist
18 0 5

Thanks @Kinjaldavra and @g33kgirl

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

This solution works!

M

g33kgirl
Shopify Partner
390 109 142

This is an 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;
}
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
MRami
Excursionist
18 0 5

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!