Contain Description on mobile (Size Chart)

Solved

Contain Description on mobile (Size Chart)

Stikkles
Tourist
11 0 3

Ola Amigos,

 

I want to have the size chart/Description on mobile to be contained to the screen, instead of having to scroll/swipe sideways to view the last part of the size chart.

https://refinedlace.com/collections/dresses/products/lace-detail-round-neck-short-sleeve-mini-dress

 

check it on mobile

Theme: Kairo 2.0.0

Accepted Solution (1)

niraj_patel
Shopify Partner
2391 516 513

This is an accepted solution.

Hello @Stikkles 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
   .rte table {
      width: 100%;
    }
    table th {
       font-size: 10px !important;
   }
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 2 (2)

niraj_patel
Shopify Partner
2391 516 513

This is an accepted solution.

Hello @Stikkles 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
   .rte table {
      width: 100%;
    }
    table th {
       font-size: 10px !important;
   }
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

PageFly-Henry
Shopify Partner
1184 335 294

Hi @Stikkles 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save


@media (max-width: 767px){

th {

    padding: 0 !important;

}

td {

    padding: 12px !important;

    text-align: center !important;

}}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.