How can I optimize the font size of my Debut Collection List on mobile?

Store Design
1

On mobile view collection titles look so big that’s not so aesthetic. On desktop it’s perfect though. How can I optimise it for mobile?

My website is www.lapluie.store

Screenshot_20211212-213857_Chrome.jpg
Screenshot_20211212-213857_Chrome.jpg1080×2400 254 KB

1 Like
2

@Regntjejen

Please add following code your assets/theme.css bottom of the file.

@media only screen and (max-width: 749px) {
.collection-grid-item__title.h3 {font-size: 1em !important;}
}

Hope this work.

Thanks!

1 Like
3

that worked wonders thank you so much!

I have one more question if that’s ok: How can I reduce the gap between sections on desktop and mobile in general? Last night I tried changing but nothing worked. I think that would look more sleek with reduced gap

www.lapluie.store

Regntjejen_0-1639380070342.png
Regntjejen_0-1639380070342.png2464×847 162 KB

1 Like
4

@Regntjejen

Please add following code your assets/theme.css bottom of the file.

@media only screen and (max-width: 749px){
.index-section {padding-top: 20px !important; padding-bottom: 20px !important;}
}

@media only screen and (min-width: 750px){
.index-section {padding-top: 20px !important; padding-bottom: 20px !important;}
}

Thanks!

5

Hello :slightly_smiling_face:

It somehow worked on mobile I see the difference however on desktop it didn’t change anything

1 Like
6

@Regntjejen

Please find following code your assets/theme.css file

@media only screen and (max-width: 749px) {
.logo-bar__item {
    display: inline-block !important;
    vertical-align: middle;
    max-width: 120px;
    margin: 0 27.5px 35px;
    width: 25% !important;
}

Rpleace to

@media only screen and (max-width: 749px) {
.logo-bar__item {
    display: inline-block !important;
    vertical-align: middle;
    max-width: 120px;
    margin: 0 27.5px 35px;
    width: 25% !important;
}
}

missing end bracket in your code

Thanks!