Shopify themes, liquid, logos, and UX
Currently, if you view a multi-column on mobile you get 1 column per row, how do I make it so the width of each column is smaller so you can view two columns per row on mobile ?
Thanks.
Solved! Go to the solution
This is an accepted solution.
@jecbon
Paste this code on top of the base.css file.
@media only screen and (max-width: 768px) {
li.multicolumn-list__item.grid__item {
max-width: 50% !important;
}
}
Hii, @jecbon
Kindly share your store URL so,
I can solve it perfectly.
Thank You.
it is just the dawn theme shouldnt the solution be the same for all ? just a change the CSS file
@jecbon
Can you give me a screenshot what you want so,
I can solve it.
Thank You.
@jecbon
Paste this code on top of the base.css file.
.grid--1-col .grid__item {
max-width: 50% !important;
width: 50% !important;
}
is there a way to make that only occur on mobile?
I want the coulmns to be 2 per row only on mobile view. ..... the current solution makes the columns to 2 per row on desktop.....
@jecbon
Paste this code on top of the basee.css file.
@media only screen and (max-width: 768px) {
.grid--1-col .grid__item {
max-width: 50% !important;
width: 50% !important;
}
}
that makes my product image and image with text columns also go to two row wide... is it possible to only edit the multi column section ?
This is an accepted solution.
@jecbon
Paste this code on top of the base.css file.
@media only screen and (max-width: 768px) {
li.multicolumn-list__item.grid__item {
max-width: 50% !important;
}
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024