Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Two column display in mobile


Skor
Go to solution Solved by tuanphan,

Question

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.

Link to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

9 answers to this question

Recommended Posts

  • 0
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>

 

Link to post
  • 0
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.

Link to post
  • 0

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.

Link to post
  • 0
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

paulajanedesigns.com-mobile-footer-min.p

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

paulajanedesigns.com-tablet-footer-min.p

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

paulajanedesigns.com-tablet-shop-page-mi

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...