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

MRami · ‎04-27-2021

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 · ‎04-27-2021

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 · ‎04-27-2021

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

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

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links