[Prestige Theme] My timeline section is not mobile-responsive

Solved
antomorg
Tourist
11 0 1

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 !

prestige_timeline_cut_support.jpg

 

Accepted Solution (1)

Accepted Solutions
Ninthony
Shopify Partner
2247 339 900

This is an accepted solution.

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 :D

View solution in original post

Replies 2 (2)
Ninthony
Shopify Partner
2247 339 900

This is an accepted solution.

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 :D

View solution in original post

antomorg
Tourist
11 0 1

Thank you very much for your quick reply !

I will test the solution as soon as I purchase the theme, and will come back to this post.

Thank you again