How to keep content tables responsive on mobile?

How to keep content tables responsive on mobile?

stellaa
Excursionist
43 0 11

Hello guys! I'm having difficulty finding out why my cells are being cut on mobile mode. This is for a custom page on the Narrative theme. 

I've attached a photo below for reference: 

Screenshot 2021-02-24 at 22.30.47.png

Screenshot 2021-02-24 at 22.30.32.png

  

I'm thinking there is an error because of the sizing I've used on the tables manually?

<table class="responsive-table" none="" style="width: 100%;" border-color:="">
<tbody>
<tr class="responsive-table-row">
<td style="text-align: left; width: 250px;">MY-TITLE</td>
<td style="width: 500px; text-align: left;">
<div><meta charset="utf-8" /></div>
<span>We encourage everyone to make more conscious choices because we believe that small conscious choices are better than none at all. At Sunnysix Active, we are taking action by providing consumers with sustainable options. As a conscious and sustainable brand, we commit to making more environmentally conscious and ethical decisions throughout the whole process. With the goal of challenging the fast fashion industry and ultimately driving the industry towards a sustainable future, we have partnered with a non-profit organization and eco-fashion manufacturere who share the same commitment. </span><br /><br /></td>
</tr>
</tbody>
</table>
<table class="responsive-table" none="" style="width: 100%;" border-color:="">
<tbody>
<tr class="responsive-table-row">
<td style="text-align: left; width: 250px;">TITLE-2</td>
<td style="text-align: left; width: 500px;">
<div><meta charset="utf-8" /></div>
<span>P100 from every piece purchased will go to ocean cleaning initiatives by Healthy Seas. By donating an amount from every piece purchased, we are able to help Healthy Seas achieve its mission of recovering harmful waste from our seas and preventing even more from ending up in the marine ecosystem. Help us clean our seas and save marine wildlife! </span><br /><br /></td>
</tr>
</tbody>
</table>

 

Would really appreciate any form of help! 

 

Thanks!

website: https://sunnysixactive.com/pages/sustainably-produced

password: heystella

Replies 4 (4)

KetanKumar
Shopify Partner
37620 3670 12165

@stellaa 

Thanks for it 

can you please sent particular page url so i will guide you 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
stellaa
Excursionist
43 0 11

@KetanKumar 

Hi ketan. thanks for your help. you can access it here.

https://sunnysixactive.com/pages/sustainably-sourced

password: heystella

Kinjaldavra
Shopify Partner
2303 570 1426

-> Go to Online Store->Theme->Edit code
-> Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 750px)
.grid .grid__item {
    
    padding-right: 10px;
}
}

 

KetanKumar
Shopify Partner
37620 3670 12165

@stellaa 

Thanks i think look now fine 

KetanKumar_0-1614308531758.png

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing