Table doesn't show on mobile (/pages)

Solved
Yulz
Tourist
3 1 0

Hi there, 

I managed to get the table to show to the right of the image on desktop (theme: Debut), however, it wouldn't properly adjust to the mobile screen. Hence, the table is just invisible on the mobile. I must say that I was having issues with getting the table to show up next to the image on desktop at first and the way I solved is as follows: created the table > copied html > removed the table > added the image > added html table code. For some reason this was the only way to make it work as needed. Did anyone had similar issues, how did you resolve it? Thank you so much!

Desktop (looks as intended)

Screen Shot 2021-01-26 at 9.09.45 PM.png

 

Mobile (no table)

Screen Shot 2021-01-26 at 9.10.34 PM.png

 

Link to the page > https://orelse.studio/pages/sizing-chart

0 Likes
ahsaniub123
Shopify Partner
50 9 6

@Yulz wrote:

Hi there, 

I managed to get the table to show to the right of the image on desktop (theme: Debut), however, it wouldn't properly adjust to the mobile screen. Hence, the table is just invisible on the mobile. I must say that I was having issues with getting the table to show up next to the image on desktop at first and the way I solved is as follows: created the table > copied html > removed the table > added the image > added html table code. For some reason this was the only way to make it work as needed. Did anyone had similar issues, how did you resolve it? Thank you so much!

Desktop (looks as intended)

Screen Shot 2021-01-26 at 9.09.45 PM.png

 

Mobile (no table)

Screen Shot 2021-01-26 at 9.10.34 PM.png

 

Link to the page > https://orelse.studio/pages/sizing-chart



@Yulz wrote:

Hi there, 

I managed to get the table to show to the right of the image on desktop (theme: Debut), however, it wouldn't properly adjust to the mobile screen. Hence, the table is just invisible on the mobile. I must say that I was having issues with getting the table to show up next to the image on desktop at first and the way I solved is as follows: created the table > copied html > removed the table > added the image > added html table code. For some reason this was the only way to make it work as needed. Did anyone had similar issues, how did you resolve it? Thank you so much!

Desktop (looks as intended)

Screen Shot 2021-01-26 at 9.09.45 PM.png

 

Mobile (no table)

Screen Shot 2021-01-26 at 9.10.34 PM.png

 

Link to the page > https://orelse.studio/pages/sizing-chart


Hi @Yulz 

 

Let me check it for you

Did my answer work for you? Please drop a Like and Mark it as Accepted.
Want to develop/design/customize your theme Hire me.
Feel free to contact me at Email: ahsan.iub123@gmail.com | Skype: ahsaniub123 | Whatsapp: +92 3012 104 116.
Shopify Expert | Shopify Developer | Liquid Developer
0 Likes
Yulz
Tourist
3 1 0

Thank you so much @ahsaniub123 

0 Likes
ahsaniub123
Shopify Partner
50 9 6

Please add this code at very bottom in theme.css file

@_media screen and (max-width:767px){
.scrollable-wrapper { 
    width: 100%;
    margin-top: 20px;
    float: left;
}
.scrollable-wrapper table {   
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
 }
}

 

Did my answer work for you? Please drop a Like and Mark it as Accepted.
Want to develop/design/customize your theme Hire me.
Feel free to contact me at Email: ahsan.iub123@gmail.com | Skype: ahsaniub123 | Whatsapp: +92 3012 104 116.
Shopify Expert | Shopify Developer | Liquid Developer
0 Likes
Yulz
Tourist
3 1 0

This is an accepted solution.

@ahsaniub123 it worked beautifully! Thank you so much!

0 Likes