Two column display in mobile

Site URL: https://carolynkdesigns.com

I had CSS on my site for my product pages to display two columns on mobile.  The code worked until I changed the type of page to make it more SEO friendly.  Here's the code I have:

@media only screen and (max-width:640px) { 
.products .list-grid { 
display: flex; 
flex-wrap: wrap; 
justify-content: space-between; 
} 
.products .grid-item { 
width: 48%; 
}
}
 

I suspect that the line that needs to be changed is the .products.list-grid since I no longer use that type of page to display products.  Check out any of the five product category pages to see the type of page I'm currently using.  They're all the same.  Thanks.

You mean this page? https://www.carolynkdesigns.com/necklaces

Yes, along with the earrings, bracelets, giftware and ornament pages.  Those are the pages I'd want in a mobile two-column display.  Thanks @tuanphan.

On 11/5/2020 at 12:04 AM, Skor said:

Yes, along with the earrings, bracelets, giftware and ornament pages.  Those are the pages I'd want in a mobile two-column display.  Thanks @tuanphan.

Add to Earrings, Bracelets, Giftware, Ornament Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  .summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 5px;
}
  }
</style>

It worked perfectly.    @tuanphan thank you so much!!

On 11/7/2020 at 1:47 AM, Skor said:

It worked perfectly.    @tuanphan thank you so much!!

Did you solve all pages? Do you still need help?

I see a small problem, when click burger menu, black flash a second then disappear.

On About page, mobile. The page has long content. You can consider adding a back to top button.

Thanks for the feedback @tuanphan.    I think the black flash is due to choosing a template with a black background initially and before we knew it, we were too far in the process to change it.  Any suggestions on how to get rid of it.  Or just go to color and make sure all of the background color for the black stylings are white instead of black.  Thanks.

@tuanphan please could you help me! I'm editing a client's website but can't work out the code to display two columns on the product page on mobile. Page is: https://www.paulajanedesigns.com/shop 

Any help would be hugely appreciated! Thank you 🙂

Ah, managed to work it out! 😀

On 2/24/2021 at 5:53 AM, zaitken1 said:

Ah, managed to work it out! 😀

I see your site has some small problems. We will give the code if you want to fix these.

1. (Mobile footer) Huge white space under footer nav links

2. (Tablet footer) Similar problem 1, on tablet

3. (Tablet shop page) Left looks huge. Want to reduce left width, increase right column width?