reduce collection list text size for mobile only

Fabian_weldon
Explorer
116 0 25

The text on top of my collection list is ok for desktop but on mobile is covers the whole image.

is it possible to change the text size on the image for mobile only.

 

thank you in advance

0 Likes
paramSoft
Shopify Partner
1466 239 655

Please provide website url and if your store is password protected then also provide password

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
Fabian_weldon
Explorer
116 0 25
paramSoft
Shopify Partner
1466 239 655

Please place this code at the end of theme.scss

@_media only screen and (max-width: 450px) {
#shopify-section-featured-collections {
margin-top: 20px !important;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
Fabian_weldon
Explorer
116 0 25

thanks for the reply.

 

Unfortunately that ruined the whole format of the website 

0 Likes
squadkin
Excursionist
11 4 3

Hello @Fabian_weldon ,

 

You have to apply font size and some padding from left right of the title text for mobile only.

Add the following code in theme.scss file.

 

body{
    &.template-index{
        .collection-grid__item-title--wrapper {
            .collection-grid__item-title {
                @media only screen and (max-width:767px){
                    padding: 0 14px;
                    font-size: 1.2em; 
                }
            }
        }
    }
}

 

Output: 

Screenshot_2.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on support@squadkin.com regarding any help
Shopify Expert | Whatsapp: +91 6356 882 809 

0 Likes