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

Solved
MRami
Excursionist
14 0 4

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

0 Likes
Anonymous
Not applicable
1774 0 0

Hello

 

Try instead background-color:white!important; 

 

Let me know if it works

 

 

0 Likes
MRami
Excursionist
14 0 4

Hi @Anonymous 

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

0 Likes
g33kgirl
Shopify Partner
270 73 87

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.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
MRami
Excursionist
14 0 4

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

 

0 Likes
g33kgirl
Shopify Partner
270 73 87

@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.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
g33kgirl
Shopify Partner
270 73 87

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.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
MRami
Excursionist
14 0 4

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!

 

0 Likes
Natztech
Shopify Partner
901 243 661

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

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
MRami
Excursionist
14 0 4

Hi @Natztech 

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

0 Likes