Wonky table on mobile version

Solved
Tourist
6 0 0
Hello, a while ago I created a table one of my pages in the Debut theme to showcase my 3 products (I don't use the collection template because it is not conducive to what I'm selling). I wanted the table to display the products in a horizontal row on desktop version, and stack vertically in mobile version. I had the Shopify design team work their magic so that the table stacked vertically for the mobile version only and it worked great...until yesterday when I went to change out one of the images in the table. It now looks completely wonky, and I'm not able to get it back how it used to be. One of the 3 products isn't showing at all, and the other 2 look like this https://cascadianjourneys.com/pages/travel-packages (must be viewed on mobile version to see issue).

Any help with this would be much appreciated! Thank you!
0 Likes

Success.

Astronaut
1069 145 260

A table's not the ideal way to design this. You can add this to your custom.scss.liquid file at the bottom and it will fix your problem on mobile, but it still kind of looks weird on desktop:

 

.travel-packages td, .travel-packages tr {
    height: auto!important;
}

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
6 0 0
Thanks, I'll try that! Since you said the table isn't the best way to
design this, do you have any other suggestions of how to create what I'm
looking for? Thanks so much!!
0 Likes

Success.

Astronaut
1069 145 260

I would just do it with normal html and use flexbox. Tables have more support, but they are kind of hard to work with. Flex is supported by 98% of browsers so it's hardly an issue anymore unless you're worried about people using Internet Explorer 6-9 on your website. Hell, the shopify admin doesnt even work on internet explorer 11. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
6 0 0
Awesome, thanks. I (with the help of a Shopify guru) added the CSS file. It'll be a good place holder until I can spend more time on it next week (since I'm headed out to guide one of my tours today) and I'll take a look at your other suggestion then too. Thanks so much!!
0 Likes
New Member
4 0 0

Hi Ninthony, I am facing a similar problem to CascadianJ. Namely, I am currently using a 2-column table (with border already removed) on one of my pages, with this layout:

 

First row of table: Image on the left, and text on the right

Second row: Image on the right, and text on the left

Third row: Image on the left, and text on the right

 

On desktop view, it appears fine:

 

1.png

 

This is fine. However, when I switch to mobile display (portrait), it shows up like this:

 

2.png

 

Could you please advise how I can the display to appear with image on top, followed by text at the bottom for Mobile viewing? So that the image and text appear stacked (vertical) - one after the other - with both image and text able to occupy the full width of the portrait screen?

 

As per your response to CascadianJ, I tried inserting this code after the last row of my theme.scss.liquid file, but it does not make any difference:

 

.How-It-Works td, .How-It-Works tr {
height: auto!important;
}

 

(The name of my page is How It Works)

 

Thank you in advance for your kind advice, and hear from you!

0 Likes
Astronaut
1069 145 260

This goes back to what I said a little earlier, this approach isnt really suited for tables. You should use the flexbox model for this approach, in my opinion. With flexbox, you can switch the order of elements. Here's an example:

https://codepen.io/ninthony/pen/WNbGNPX

 

The basic idea is that there's a container with display: flex applied to it. What this does is it will fit any elements that are direct children of the container into the container. So basically:

 

<style>
  * {
    box-sizing: border-box;
  }
.flex-container {
  display: flex;
align-items: center; } .picture { width: 50%; } .picture img { width: 100%; } .text{ width: 50%; } </style> <div class="flex-container"> <div class="picture"> <img src="/path-to-your-image"> </div> <div class="text"> </div> </div>

There's other tweeks you may have to make, but this is the gist of it. So here's the style logic:

 

* {

box-sizing: border-box;

}

 

This snippet applies border-box to all elements. This ensures that any padding that you add to any of your elements wont apply to the total width of the element, which is important when using percentages to define the children of the container's widths. So if you make your children 50% each, and add padding to one of the elements, it doesnt increase it's width to 51% say. Just a good rule of thumb to have borderbox on your elements.

 

.flex-container {
display: flex;

align-items:center;
}
.picture {
width: 50%;
}
.picture img {
width: 100%;
}
.text{
width: 50%;
}


So here we apply display: flex to the flex container. Now we have larger control over the direct children of the container. We set the picture to 50%, and the text to 50% so that they take up half the space of the container. We set the img element that's inside the picture div to width: 100% so that it takes up the full width of that element (which is 50% at the moment). If you didn't do this and the size of the image is bigger than the element, then it would spill out of the container. This makes the image constrain to the container.

 

So that's all set up for desktop. Then you would use a media query to listen for a certain page width, and change the direction of the flex container, the order of the elements, and the width of the elements:

 

@media (max-width: 768px){
  .flex-container {
    flex-direction: column;
  }
  .picture {
    order: 0;
    width: 100%;
  }
  .text {
    order: 1;
    width: 100%;
  }
}

So here we're saying, "After the screen is less than 786 pixels, apply these styles instead". We change the flex direction to "column" - It's set to "row" by default which is why you don't see that earlier in the file. Then we change the order - which starts at 0 by default - for the elements and set their width to 100%. So the picture will be on the top (order: 0), and the text will be on the bottom (order: 1). 

 

It might be a little confusing to you at first, but if you work with this model say 4 or 5 times, it will practically become second nature. Here's a flex-box guide:

 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

There's actually a whole lot more to flexbox than what I outlined here, but the main things I would say to focus on are:

 

display: flex;

flex-direction;

justify-content;

align-items;

 

If you just learn those things, you will have a lot of power manipulating elements on a page.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
New Member
4 0 0

Dear Ninthony, thank you so much! I have applied the codes you provided and have edited it according to my requirements, and it works perfectly now!

 

Could I also ask one more related question - is there a way I can adjust the margins on the page I am currently working on, and also all other pages on my site (including homepage) at the same time?

 

Eg please see the red arrows below:

 

3.png

 

Thank you very much once again!

0 Likes
Astronaut
1069 145 260

It's likely a container style throughout your whole site with a max-width. I couldn't tell you exactly without seeing the site. Are you saying you want that to be full width? 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
4 0 0

@Ninthony wrote:

It's likely a container style throughout your whole site with a max-width. I couldn't tell you exactly without seeing the site. Are you saying you want that to be full width? 


Hi Ninthony, yes what you have mentioned above is correct. I am essentially trying to adjust the margins on all pages across my site to be of a standard size. Is that possible? Currently the margins are too large, and I would like to shrink them a little, so that the text and images on the page can be 'spread out' across the page a little wider, leaving less blank space at the sides. Seek your advice on this?

 

On a separate issue, currently on one of my pages there is a flexbox portion (circled in red below) and a normal rich text portion (circled in blue below):

 

4.png

 

For some reason, it seems the font size (and style?) of the two parts are slightly different... would you have any idea why, and also how I can standardize the fonts across both parts?

 

Thanks so much once again!

0 Likes