Shopify Design

antomorg · ‎09-16-2021

https://0elsjea69hr33gtp-56351457440.shopifypreview.com

No theme's code changing has been done. When I add a 3rd section in my timeline ("HISTOIRE", "INSPIRATION", "QUALITE"), I observe that "Histoire" is cut on some mobile screen, showing something like ("ISTOIRE") or less.

I have added "Customer Privacy", "Fontbox", "Fontify", "Geolocation" and "Translation Lab - AI Translate" apps on my shop.

See below. When clicking on "HISTOIRE", the title does not slide right as it should.

Thanks a lot for your support !

Ninthony · ‎09-16-2021

You'll have to lower the font size and padding at a mobile size. Add this to the bottom of your theme.css.liquid file:

@media(max-width: 767px){
    .Timeline__NavItem{
        padding: 20px 10px;
    }
    .Timeline__NavLabel {
        font-size: 10px
    }
}

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Ninthony · ‎09-16-2021

You'll have to lower the font size and padding at a mobile size. Add this to the bottom of your theme.css.liquid file:

@media(max-width: 767px){
    .Timeline__NavItem{
        padding: 20px 10px;
    }
    .Timeline__NavLabel {
        font-size: 10px
    }
}

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄