Amending mobile version only font colour

Solved
Jamesaevans
Tourist
7 0 5

Good afternoon,

I am looking for specific code to amend the text on my main section for mobile only view - given the primary image on the first hero section, I have selected a font in white colour for the text on desktop. However on mobile, that means it is not visible.

How do I amend the font colour for that specific section on mobile version only?

Store: https://dawncoldbrew.com/

pw: coffeetime

Thanks!

James

 

LamQSolutions
Pathfinder
113 26 39

This is an accepted solution.

Hi,

To fix this problem, you can install my free app Custom CSS and add the following code

If you don't want to install the app, you can add the following at the bottom of your assets/styles.scss.liquid or assets/theme.scss.liquid file

@media screen and (max-width: 767px) {
  #shopify-section-image--image-with-text-block
    .image-text-block-row__text-container
    h2 {
    color: #000;
  }
}
Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.
Jamesaevans
Tourist
7 0 5

Unfortunately I can't find either of those assets - closest is assets / theme.css and adding that code there doesn't work. 

Any other ideas?

0 Likes
LamQSolutions
Pathfinder
113 26 39

Hi,

Please try adding to the file assets/theme-index.min.css

Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.
0 Likes
dmwwebartisan
Shopify Partner
7428 1762 2360

This is an accepted solution.

@Jamesaevans 

Please add the following code at the bottom of your assets/theme-index.min.css file.

@media screen and (max-width: 768px){
.image-with-text-block--image--image-with-text-block .image-text-block-row__text-container {
    background: rgba(0,0,0,0);
    color: #242424 !important;
}
}

 

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →