Dawn theme - Changing multi column width on moblie.

Solved
jecbon
Excursionist
39 0 9

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. 

Accepted Solution (1)

Accepted Solutions
Zworthkey
Shopify Partner
2571 309 641

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;
}
}

 

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 10 (10)
Zworthkey
Shopify Partner
2571 309 641

Hii, @jecbon 
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jecbon
Excursionist
39 0 9

it is just the dawn theme shouldnt the solution be the same for all ? just a change the CSS file 

 

Zworthkey
Shopify Partner
2571 309 641

@jecbon 
Can you give me a screenshot what you want so,
I can solve it.
Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Zworthkey
Shopify Partner
2571 309 641

@jecbon 
Paste this code on top of the base.css file.

.grid--1-col .grid__item {
    max-width: 50% !important;
    width: 50% !important;
}



If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jecbon
Excursionist
39 0 9

is there a way to make that only occur on mobile?

Zworthkey
Shopify Partner
2571 309 641

@jecbon 
This code is only more mobile-view.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jecbon
Excursionist
39 0 9

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.....

Zworthkey
Shopify Partner
2571 309 641

@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;
}
}



If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jecbon
Excursionist
39 0 9

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 ?