12.0 Dawn Related Products Columbs Mobile

[Amy200101]

Hey,

I am working on my website and before I start adding my full products file I want to get the layout right on mobile as im happy with the desktop view.

Related Products - I would like it to have 2 columns on mobile however it keeps at 1. I have tried a few codes but have been unsuccessful so far. Can I get some recommendations for changes please.

This is my URL https://www.supplieswarehouse.co.uk/ and I have been using the vitamin and supplements page to test.

Thanks

[GabrielS · Accepted solution]

Hi,

You can achieve a 2 column layout on mobile phones by using the following CSS code:

@media (max-width:768px) {
ul.grid.product-grid.grid--4-col-desktop.grid--2-col-tablet-down {
  display: block;
}
li.grid__item {
  width: 50% !important;
  float: left;
}
}

Adding it at the end of your custom.css file should be working as expected.

Cheers!

[Amy200101]

That worked great, Is there anyway to set them to fit the same space?. As you can see some text is longer than others so they are uneven

[GabrielS]

Yes, you can shorten the titles, or seek for a developer for a custom solution. Assuming the question has been answered, it would be great if you can mark this as the solution.

[Small_Task_Help]

Hi,

Need to edit CSS to achieve the solution 

Code example:

@media (max-width: 767px) { /* Adjust the max-width value based on your theme's breakpoint */
  .related-products-class { /* Replace with the actual class or ID used for your related products */
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust as needed */
  }
  .related-products-class .product-item { /* Replace with the actual class or ID used for individual product items */
    flex: 1 1 48%; /* Adjust as needed to fit two columns */
    box-sizing: border-box;
  }
}

[BrainStation23]

HI @Amy200101 
You can use this code to achive your result 
go to online store ->Edit code -> base.css fle and top of the file add bellow code 

@media (max-width:768px) {
  ul.grid.product-grid.grid--4-col-desktop.grid--2-col-tablet-down{
    display: grid !imporant ;
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

Result :