Fix Sizing Of Text For Mobile View Using Custom CSS

Nu89
Tourist
40 0 1

Hello,

I am new on shopify, and I thought its automatically optimized when screen size changes.

I need help in font size of banner title and a text underneath 

How can I set a smaller size on a mobile?

 

lustrestores.com

lustrellc

Replies 7 (7)

Raj-webdesigner
Shopify Partner
236 52 53

Add this css in your edit code > theme.css File 

 

@media screen and (max-width: 700px) {
    .section-blends .prose em {
        font-size: 24px;
    }
    .section.section-blends.section-full {
        padding-block: 8px;
    }
    .slideshow__slide .place-self-center .h4 {
        font-size: 20px;
    }
}
.section-blends .prose em {
    font-size: 32px;
}
.section.section-blends.section-full {
    padding-block: 20px;
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
Nu89
Tourist
40 0 1

hello, unfortunately it did not work

 

Raj-webdesigner
Shopify Partner
236 52 53

Check Again Becuse My Side This code work perfectly work.

add This css in theme.css File Code

 

 

@media screen and (max-width: 700px) {
    .section-blends .prose em {
        font-size: 24px;
    }
    .section.section-blends.section-full {
        padding-block: 8px;
    }
    .slideshow__slide .place-self-center .h4 {
        font-size: 20px;
    }
}
.section-blends .prose em {
    font-size: 32px;
}
.section.section-blends.section-full {
    padding-block: 20px;
}

 

 

See Screenshot Deskop View:->

Rajwebdesigner_0-1712050300744.png

See Screen mobail view:->

Rajwebdesigner_1-1712050473580.png

 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
Nu89
Tourist
40 0 1

no its not working,

can I add it in custom css part?

Raj-webdesigner
Shopify Partner
236 52 53

Try It,

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
Nu89
Tourist
40 0 1

did not work

Raj-webdesigner
Shopify Partner
236 52 53

I Add Few Changes,

Again Try 

@media screen and (max-width: 700px) {
    .section-blends .prose em {
        font-size: 24px !important;
    }
    .section.section-blends.section-full {
        padding-block: 8px !important;
    }
    .slideshow__slide .place-self-center .h4 {
        font-size: 20px !important;
    }
}
.section-blends .prose em {
    font-size: 32px !important;
}
.section.section-blends.section-full {
    padding-block: 20px !important;
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com