Table doesn't show up accordingly in real for mobile - Theme Debut

Solved
Celine_Japan
Tourist
5 0 1

Hi!

The table that I made appears nice from the platform Shopify, but when I check in real from a mobile (both Safari and Chrome), the text alignment becomes different.

"Peace Water" appears to not be wrapped and hide the text in the next cell on the right (attached the screenshots from both version).

The table is made in a Page, and I want the text to be aligned vertically.

The code is the following:

<td style="width: 18%; overflow-wrap: anywhere; vertical-align: middle; text-align: center; wide-space: break-spaces;"><span><b>Peace Water</b></span></td>

Anyone has an idea why the format is different and why it is not working?

Big thanks in advance!

- Display from Shopify:

Capture d’écran 2020-08-16 à 14.25.13.png

- Display directly form the url:

IMG_3759.PNG

 

0 Likes

Hello,

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one), I'll help you out to the best of my ability.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
Celine_Japan
Tourist
5 0 1

Hi Diego, 

That is super kind of you!

The page url is https://www.pwj-organic.com/pages/about and no password.

 

This is an accepted solution.

Hey,

I wasn't able to replicate your issue on my mobile devices, but try this:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media (max-width: 450px){

    table td {
    white-space: break-spaces !important;
}
}


Let me know how it goes.
 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
Celine_Japan
Tourist
5 0 1

Thank you but unfortunately, this is not working better.

I have also tried to add vertical-align in this code, but nothing happen.

I am surprise that you couldn't replicate the issue cause we are 3 people from the team that had the same display. 

0 Likes

Interesting. What device are you guys using? 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
Celine_Japan
Tourist
5 0 1

We are all using iPhone (SE, X, 11). And you, what device are you using?

0 Likes
Celine_Japan
Tourist
5 0 1

I have tried again today and it is finally working!! Thank you soooo much Diego.

0 Likes

@Celine_Japan I'm happy to hear that! You're welcome. 

Next time you need help feel free to contact me personally via e-mail.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.