Multicolumn Photos TOO BIG on mobile view

Store Design

Topic summary

A user encountered an issue where multicolumn photos displayed correctly on desktop but appeared excessively large on mobile devices. They sought a solution that would reduce photo sizes on mobile without affecting the desktop layout.

Solution Provided:

  • Another user shared custom CSS code targeting only mobile views using a media query (@media screen and (max-width: 768px))
  • The code specifically targets .multicolumn-card elements
  • Adjustable parameters include height, width, and bottom margin (example values: 200px height/width, 100px bottom margin)

Outcome:
The CSS solution was implemented successfully and resolved the mobile display issue.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

I have multicolumns on all my collection pages and the photos look great on desktop, BUT on the mobile view the photos are TOO LARGE. How can I reduce the photos sizes on mobile view only(without affecting desktop view)?

Using Dawn theme…eminentcrowns.com

2

Add this code in custom CSS
adjust the height, width and margin accordingly
These will work perfectly for only images in multicolumn

@media only screen and (max-width: 768px) {
.multicolumn-card {
height: 200px;
width: 200px;
margin: auto;
margin-bottom : 100px;
}
}

Tell me If it worked!!

1 Like
3

Worked perfectly…Thank you!