Liquid, JavaScript, themes, sales channels
Hello Guys,
I am working on the layout of the page:
https://wakingland.com/pages/copy-of-wakingland-story
Is there a way that i can make the table responsive to mobile view.??
Thanks
Solved! Go to the solution
This is an accepted solution.
@wakingland, do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (max-width: 767px){
.table-wrapper table{
display: block !important;
}
.table-wrapper tr{
display: flex !important;
flex-direction: column !important;
}
.table-wrapper td{
width: 100% !important;
height: auto !important;
min-height: 100% !important;
}
}
Please let me know whether it works.
Kind regards,
Diego
Hi there,
Jack from OpenThinking here!
Tables are not mobile friendly. I'd suggest using either CSS Flex or CSS grids to achieve that same effect.
Here's an example with CSS flex:
<div class="flexx">
<div>
<p>My travels all over the world have led me to meet beautiful people from different cultures and different nations. Despite our differences, we all share a common value in our hearts: our love for nature and planet Earth. I have always dreamt of bringing their stories to share with people in other parts of the world, as well as finding a way to support their home-grown businesses by somehow connecting their products to people in all parts of the world.</p>
</div>
<div>
<img src="https://cdn.shopify.com/s/files/1/0043/9835/0407/files/story_profile.jpg?v=1620460848" alt="">
</div>
</div>
<style>
.flexx { display: flex; flex-direction: row; width: 100%; }
.flexx > * { flex: 0 1 auto; min-width: 50%; }
.flexx img { object-fit: cover; width: 100%; }
@media (max-width: 700px) { .flexx { flex-direction: column; } }
</style>
You can see it in action here
let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.
hello @wakingland
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 769px) {
.template-page .rte table td {width: 100% !important;float: left;height:400px !important}
}
Hello, @OpenThinking
This solution helped me - however, how can I adjust the width of the columns?
I would like to make the left column 66% and the left one 33%
Thanks a lot.
@Otayfer try this code:
.flexx { display: flex; flex-direction: row; width: 100%; }
.flexx > * { flex: 1; }
.flexx > *:first-child { min-width: 66%; }
.flexx > *:last-child { min-width: 33%; }
.flexx img { object-fit: cover; width: 100%; }
@media (max-width: 700px) { .flexx { flex-direction: column; } }
cheers
This is an accepted solution.
@wakingland, do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (max-width: 767px){
.table-wrapper table{
display: block !important;
}
.table-wrapper tr{
display: flex !important;
flex-direction: column !important;
}
.table-wrapper td{
width: 100% !important;
height: auto !important;
min-height: 100% !important;
}
}
Please let me know whether it works.
Kind regards,
Diego
This works beautiful thank you.
Can you please help on looking the same table on the providers page.
https://wakingland.com/pages/providers
@wakingland
No worries, I'm glad it helped. You can repeat the steps aforementioned and use the following code for the other page:
@media (max-width: 767px){
table#home *{
width: 100% !important;
display: block !important;
}
}
Kind regards,
Diego
hello @wakingland please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. see screenshot http://prnt.sc/12r753w
@media only screen and (max-width: 749px){
.table-wrapper tr {
display: flex !important;
flex-wrap: wrap;
flex-direction: row !important;
}
.template-page .table-wrapper td {
flex: 0 0 100% !important;
}
}
I have the same problem. But I cannot find any of the files. Can you please check the link. I am using Flex theme. Ankle Brace Supports in Australia | Ankle Braces -Tynor AHS | Australian Healthcare Supplies
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024