How can I make a table view responsive on mobile?

Technical Q&A
1

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

2

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:


  

    

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.

  

  
    
![story_profile.jpg?v=1620460848|649x519](upload://yVVzi7fklvg58Zyc07Vq8JhdMu0.jpeg)

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.

1 Like
3

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

@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
diego_ezfy_0-1620613197234.png547×837 119 KB

Please let me know whether it works.

Kind regards,
Diego

1 Like
5

This works beautiful thank you.

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

https://wakingland.com/pages/providers

6

@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

7

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

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.

9

@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

1 Like
10

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