Dawn Theme Multicolumn Issues

Solved

Dawn Theme Multicolumn Issues

RazzleDazzle_42
New Member
4 0 0

I am using the Dawn theme and I want to increase the vertical spacing between the top and bottom row and decrease the background on the bottom of each column.

 

How do I do that?

 

https://shave-authority.com/

 

Screenshot 2024-07-03 at 23.30.34.png

Thx in advance!

Accepted Solutions (2)
Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

Please use this code and check again 

.multicolumn-card__info {
    padding: 0.5rem 2.5rem !important;
}
.multicolumn-card__info .link {
    margin-top: 0 !important;
}
.multicolumn-list {
    row-gap: 12px !important;
}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

I guess this is the issue with your browser

Screenshot 2024-07-04 at 16.40.41.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

RazzleDazzle_42
New Member
4 0 0

There is also a weird padding on the left edge only of the columns that I would like to remove?

 

Screenshot 2024-07-03 at 23.39.41.png

 

 The only code I added to the section-multicolumn.css to make the pictures fill the full column is this:

 

 

.multicolumn-card__image-wrapper{
    margin: unset;
}

 

 

 

I also edited this part of the section-multicolumn.css code to remove the padding on the top (I went from 2.5rem to 0rem):

 

 

.multicolumn-card-spacing {
  padding-top: 0rem;

 



I also added this code to the base.css to make the pictures of the columns zoom when hovering over them:

 

 

.multicolumn-card__image-wrapper .media{
        overflow: hidden;
        margin: 0 auto;
    }
  
    .multicolumn-card__image-wrapper .media img {
        width: 100%;
        transition: 0.5s all ease-in-out;
    }
  
    .multicolumn-card__image-wrapper .media:hover img {
        transform: scale(1.05);
    }

 

 

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

Please use this code and check again 

.multicolumn-card__info {
    padding: 0.5rem 2.5rem !important;
}
.multicolumn-card__info .link {
    margin-top: 0 !important;
}
.multicolumn-list {
    row-gap: 12px !important;
}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

RazzleDazzle_42
New Member
4 0 0

That fixed the vertical spacing and bottom text spacing issues, but the weird margin/padding on the right side of all of the columns is still there?

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

I guess this is the issue with your browser

Screenshot 2024-07-04 at 16.40.41.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.