Put two columns for Mobile on "You May Also Like"

Technical Q&A

Topic summary

A user seeks to modify the “You May Also Like” product recommendations section to display two columns on mobile devices instead of the default layout.

Proposed Solution:

  • Edit the theme’s base.css file via Online Store → Theme → Edit code → Assets
  • Add CSS targeting .product-recommendations .product-grid__item with width: calc(50% - 0.25rem) !important within a media query for screens with max-width 450px

Status: The solution has been provided but not yet confirmed as implemented or tested by the original poster. The discussion remains open pending verification of the fix.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
2

hi @Yusa1

Its SideNode! We will be happy to help you today.

You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>

@media screen and (max-width: 450px){
.product-recommendations .product-grid .grid__item {
    width: calc(50% - 0.25rem)!important;
}
}

If I was able to assist you, please remember to give it a Like and Mark it as the Solution!
Let me know if need further assistance
Regards,
SideNode

1 Like