Resizin table on pop up in product page

[radaApeta]

Hello,

i need help with pop up on product page. In my pop up there should be a sizing chart for shoes, but its not very well-arranged and hard to see what is what. On my desktop version it looks ok, I need only help with mobile verison (make it smaller so everythin can fit etc…) Thank you for your time

https://81e325-28.myshopify.com/
0007

[BSSCommerce-B2B]

@radaApeta ,

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

Result:

If it helps you, please like and mark it as the solution.

Best Regards

[BSS-TekLabs]

• Here is the solution for you @radaApeta
• Please follow these steps:

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before and press ‘Save’ to save it

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[Made4uo-Ribe]

Hi @radaApeta

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media screen and (max-width: 749px) {
table.GeneratedTable tr {
    margin: auto;
    text-align: center;
}
}

And save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[PageFly-Amelia]

@radaApeta

This is Amelia 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){

.product-popup-modal__content-info {

padding: 0;

}

table.GeneratedTable {

display: table !important;

max-width: 100% !important;

}

.GeneratedTable td {

text-align: center;

}

}

Hope that my solution works for you.

Best regards,

Amelia | PageFly

[radaApeta]

Hello, thanks that worked perfectly, but can put the EU to the left so that its more eye pleasing and there will be more spaces between each column. Thank you

[radaApeta]

hey, thanks for the code, bud it doesnt work for me. If you could send another one a make each coloum to have same spacing between each other I would be really grateful! Thank you @BSSCommerce-B2B

[BSSCommerce-B2B]

@radaApeta , sorry you can change the code like this

Result:

[radaApeta]

Hey, THANKS AGAIN, but the nike a jordan had 5 colomuns and other tables had only 4, so the others didnt look good, so i make the nike a jordan only 4 column. Can you please take a last look a try to fix? Also if its possible that the heading and subtitle is not centred. If its posibble i would like to be the same way as it is on desktop verison. Thanks again, you are really helping me !

[BSSCommerce-B2B]

@radaApeta , Try this one

Result

Desktop:

Mobile:

[radaApeta]

THANK YOU !!! @BSSCommerce-B2B