Fix Sizing Of Text For Mobile View Using Custom CSS

Store Design
,
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?

lustrellc

2

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;
}
3

hello, unfortunately it did not work

4

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
Rajwebdesigner_0-1712050300744.png1918×914 252 KB

See Screen mobail view:->

Rajwebdesigner_1-1712050473580.png
Rajwebdesigner_1-1712050473580.png330×822 195 KB

5

no its not working,

can I add it in custom css part?

6

Try It,

7

did not work

8

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;
}