How can I adjust header text size for mobile viewing?

Shopify Discussion
1

I have a video background for my header with a heading and I want my heading text size to be smaller when I change to mobile.

how do I change mobile only text size and what coding do I use?

thanks

2

Hey, @L25HRY
You have to use media query for CSS.
Share the store URL so I can send you the exact code.

1 Like
3

Thanks,

https://25f61a-2.myshopify.com/

4

Hey @L25HRY Are you talking about this text? ( https://prnt.sc/mpcAgUK8x_GK )
If yes then it’s not possible cause the text is in the video.

If You talking about the text below the video ( https://prnt.sc/SmxxgmIHHfEe ) then please add CSS code to the theme code in theme.liquid file which is located in the layout folder find the tag and paste the code above body tag.

@media only screen and (max-width: 767px){ #shopify-section-template--20808281555257__d6acd530-29fb-4cf0-90ce-07d848e6e767 h2 { font-size: 24px; } }

If this does not work then add important to it.

@media only screen and (max-width: 767px){ #shopify-section-template--20808281555257__d6acd530-29fb-4cf0-90ce-07d848e6e767 h2 { font-size: 24px !important; } }
5

Hey @L25HRY Are you talking about this text? ( https://prnt.sc/mpcAgUK8x_GK )
If yes then it’s not possible cause the text is in the video.

If You talking about the text below the video ( https://prnt.sc/SmxxgmIHHfEe ) then please add CSS code to the theme code in theme.liquid file which is located in the layout folder find the tag and paste the code above body tag.

@media only screen and (max-width: 767px){ #shopify-section-template--20808281555257__d6acd530-29fb-4cf0-90ce-07d848e6e767 h2 { font-size: 24px; } }

If this does not work then add important to it.

@media only screen and (max-width: 767px){ #shopify-section-template--20808281555257__d6acd530-29fb-4cf0-90ce-07d848e6e767 h2 { font-size: 24px !important; } }
1 Like