How can I make text resize with screen changes on mobile view?

Technical Q&A
1

Hi, can someone please help me? How do I stop my headings and text not resizing? Is there a way so the text resizes as the screen size changes? In mobile view Iā€™d like the text to resize to something smaller. Thank you for your help :slightly_smiling_face:

https://decru-vintage.myshopify.com/

pass: gluvia

Screen Shot 2021-09-08 at 3.32.35 pm.png
Screen Shot 2021-09-08 at 3.32.35 pm.png1010Ɨ1510 308 KB

Screen Shot 2021-09-08 at 3.36.08 pm.png
Screen Shot 2021-09-08 at 3.36.08 pm.png2396Ɨ1510 855 KB

2

Hello @Jess2021 ,

@media only screen and(max-width:749px){
	h2.h1.mega-title.mega-title--large {
    font-size: 40px;
}
h2 {
    font-size: 20px;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Note : If your store is having this media already (for mobile version) then no need to add whole code . Only just add css in that media ie 749px(already exist)

3

hii, @Jess2021
Can you mark which text you want to edit?
Thank You.

4

@Jess2021
paste this code on top of the theme.scss file.

@media only screen and (max-width: 768px) {
h2.h1.mega-title.mega-title--large {
    font-size: 45px !important;
}

.section-header.text-center h2 {
    font-size: 30px !important;
}

}

Thnk You.

1 Like
5

This has worked, thank you!

1 Like
6

@Jess2021
welcome.