Solved

Reducing the section header bottom padding on Dawn

rigz99
Excursionist
11 0 4

I am using the Dawn theme. When i put a collection section, the header is too far up from the images. How can i reduce the section header bottom padding ? 

Accepted Solutions (2)
BSSCommerce-HDL
Shopify Expert
659 203 219

This is an accepted solution.

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716124232740.png

 

Step 2: Search file base.css, theme.css , styles.css or theme.scss.liquid

BSSTechVenture_1-1716124239903.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

@media only screen and (min-width: 990px) {
    .title-wrapper-with-link {
        margin-bottom: 10px !important;
    }
}

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

BSSCommerce-HDL
Shopify Expert
659 203 219

This is an accepted solution.

Hi @rigz99

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css or styles.css 

Step 3: Insert the below code at the bottom of the file -> Save

.collection-list .card__inner {
   height: 110px !important;
}

.collection-list .card__inner .card__media img{
   object-fit: contain !important;
}

main#MainContent {
    padding: 0 40px;
}

Here is result: 
For desktop: 

BSSTechVenture_0-1716127845181.png

For mobile: 

BSSTechVenture_1-1716127874741.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 17 (17)

BSSCommerce-HDL
Shopify Expert
659 203 219

Hi @rigz99Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

rigz99
Excursionist
11 0 4

This is the link : https://e90fd7-56.myshopify.com/

 

Thank you for the help !

BSSCommerce-HDL
Shopify Expert
659 203 219

Hi @rigz99, You want to reduce the white space in this section, right?

 

BSSTechVenture_0-1716123843100.png

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

BSSCommerce-HDL
Shopify Expert
659 203 219

This is an accepted solution.

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_0-1716124232740.png

 

Step 2: Search file base.css, theme.css , styles.css or theme.scss.liquid

BSSTechVenture_1-1716124239903.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

@media only screen and (min-width: 990px) {
    .title-wrapper-with-link {
        margin-bottom: 10px !important;
    }
}

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

rigz99
Excursionist
11 0 4

It worked ! Thank you so much ! Can i ask another question ?

BSSCommerce-HDL
Shopify Expert
659 203 219

@rigz99  Sure, I'm happy to help you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

rigz99
Excursionist
11 0 4

Thank you so much !

 

I need help in order to reduce the size of the collection cards as you can see in the homepage, and also to make the banner images a little smaller. I'm trying to design the website liek this website : https://www.noon.com/saudi-ar/

 

What i need is this :

- How to make the collection images smaller (on both web and mobile)

- How to resize the website in order to have some space on the sides instead of the images taking the full width of the website

 

I don't know if i made it clear i'm not very good in english but thank you for helping 

BSSCommerce-HDL
Shopify Expert
659 203 219

This is an accepted solution.

Hi @rigz99

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css or styles.css 

Step 3: Insert the below code at the bottom of the file -> Save

.collection-list .card__inner {
   height: 110px !important;
}

.collection-list .card__inner .card__media img{
   object-fit: contain !important;
}

main#MainContent {
    padding: 0 40px;
}

Here is result: 
For desktop: 

BSSTechVenture_0-1716127845181.png

For mobile: 

BSSTechVenture_1-1716127874741.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

rigz99
Excursionist
11 0 4

Thank you so much you're a legend

rigz99
Excursionist
11 0 4

is it normals that these modifications show up well on pc but don't show up on mobile ? It doesn't work when i go on the website from my phone

BSSCommerce-HDL
Shopify Expert
659 203 219

@rigz99Can you kindly share the details of your problem (screenshot/ record) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

rigz99
Excursionist
11 0 4

Ok so this is the problem. This is a screen shot of the website from my phone.

 

WhatsApp Image 2024-05-19 at 17.57.38.jpeg

 

As you can see, the modifications are not applied and i don't know why. What i'm trying to do is like this website: noon.com where i want the collection cards to be on a single line that people can swipe to see all te collections, and the collection cards should be small cards. Please help me. For now i have erased all the code that i added so i can start fresh

BSSCommerce-HDL
Shopify Expert
659 203 219

Hi @rigz99, After checking I see your website is changed from right to left

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css or styles.css 

Step 3: Insert the below code at the bottom of the file -> Save

.collection-list-wrapper .slider-buttons {
   flex-direction: row-reverse !important;
}

.collection-list-wrapper .title-wrapper-with-link {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

Here is result: 

BSSTechVenture_0-1716135396965.png

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍



If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

rigz99
Excursionist
11 0 4

It still doesn't show up on my phone

ThePrimeWeb
Shopify Partner
2138 614 487

Hey @rigz99,

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
rigz99
Excursionist
11 0 4

This is the link : https://e90fd7-56.myshopify.com/

 

Thank you for the help !

rigz99
Excursionist
11 0 4

I don't know how to do this in code. I tried using chatgpt but it didn't work.This is the link : https://e90fd7-56.myshopify.com/

 

Thank you for the help !