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 </body> on theme.liquid

<style>
@media screen and (max-width: 749px) { {
  .product-popup-modal__content-info * {
     font-size: 12px!important
  }
  .product-popup-modal__content-info table th {
    width: 100%;
    text-align: left   
  }
}
</style>

Result:

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

Best Regards 😍

[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

<style>
@media screen and (max-width: 749px) {
  .product-popup-modal__content-info * {
     font-size: 12px!important;
     text-align: center!important;
  }
  .product-popup-modal__content-info table th {
    width: 100%;
  }
}
</style>

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 · Accepted solution]

@radaApeta , Try this one 🙂

<style>
.product-popup-modal__content table  th {
   width: 25%;
}
.product-popup-modal__content table {
   display: table;
   max-width: 100%;
}
.product-popup-modal__content-info * {
  text-align: left!important;
}
@media screen and (max-width: 749px) {
  .product-popup-modal__content-info * {
     font-size: 12px!important;  
  }
}
</style>

Result

Desktop:

Mobile:

[radaApeta]

THANK YOU !!!! @BSSCommerce-B2B 

[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 </head> and press 'Save' to save it

<style>
@media only screen and (max-width: 600px) {
    .product-popup-modal__content table {
        max-width: 100% !important;
        width: 100% !important;
    }
.product-popup-modal__content-info {
    padding-right: 0 !important;
}
.GeneratedTable th {
    width: 100% !important;
}
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[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

[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