Mobile table view

Solved
wakingland
Excursionist
19 0 2

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

0 Likes
OpenThinking
Shopify Partner
233 54 65

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.

⚡️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
⚡️ Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
Natztech
Shopify Partner
851 230 630

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}
 }

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes

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;
}
}

 

diego_ezfy_0-1620613197234.png

 



Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
wakingland
Excursionist
19 0 2

This works beautiful thank you.

Can you please help on looking the same table on the providers page.

 

https://wakingland.com/pages/providers

 

 

0 Likes

@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

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
Natztech
Shopify Partner
851 230 630

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;
}
}

 

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes