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

Solved

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

Jess2021
Excursionist
12 0 3

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 🙂 

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

pass: gluvia

Screen Shot 2021-09-08 at 3.32.35 pm.pngScreen Shot 2021-09-08 at 3.36.08 pm.png

Accepted Solution (1)

Zworthkey
Shopify Partner
5581 642 1575

This is an accepted solution.

@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.

View solution in original post

Replies 5 (5)

oscprofessional
Shopify Partner
15938 2383 3092

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)

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

Zworthkey
Shopify Partner
5581 642 1575

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

Zworthkey
Shopify Partner
5581 642 1575

This is an accepted solution.

@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.

Jess2021
Excursionist
12 0 3

This has worked, thank you!

Zworthkey
Shopify Partner
5581 642 1575

@Jess2021 
welcome.