Separate Custom Text Sizes For Desktop and Mobile (Dawn 9.0.0)

Store Design
, ,
1

Hey guys,

I am looking to add some code that will allow me to separately customize the text size of a Rich Text Header on my landing page to have different a size for both desktop and mobile. That way it looks better formatted on both devices.

Website: Wholesome Boy

Section Location (Landing Page Underneath Banner Image and Above Collection):

4fc2d5e55e9d4ad9d79b4bcf5b537272.png
4fc2d5e55e9d4ad9d79b4bcf5b537272.png1247×373 34 KB

2

You can follow these steps:

  1. Inspect the website, you find the element that needs to change the font color

BSSCommerce_3-1684467565317.png
BSSCommerce_3-1684467565317.png1522×721 237 KB

  1. Copy the element’s selector

BSSCommerce_4-1684467574810.png
BSSCommerce_4-1684467574810.png1446×685 216 KB

  1. Go to edit code in themes, search for theme.css or base.css file or file with .css format

you just copied the element’s selector, add attribute: font-size

BSSCommerce_5-1684467589192.png
BSSCommerce_5-1684467589192.png1351×710 133 KB

/* for desktop */
#shopify-section-template--16135796490410__ae60fe57-373b-4e91-bca2-944557a5b444 > div > div > div > div > h2 {
  font-size: 20px;
}

/* for mobile */
@media all and (min-width: 750px) {
  #shopify-section-template--16135796490410__ae60fe57-373b-4e91-bca2-944557a5b444 > div > div > div > div > h2 { {
    font-size: 14px;
  }
}