Reducing the section header bottom padding on Dawn

[rigz99]

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 ? 

[BSSCommerce-HDL · Accepted solution]

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 , styles.css or theme.scss.liquid

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 😍

[BSSCommerce-HDL]

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

[rigz99]

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

Thank you for the help !

[BSSCommerce-HDL]

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

[BSSCommerce-HDL · Accepted solution]

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 , styles.css or theme.scss.liquid

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 😍

[rigz99]

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

[BSSCommerce-HDL]

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

[rigz99]

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 · 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: 

For mobile: 

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 😍

[rigz99]

Thank you so much you're a legend

[rigz99]

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]

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

[rigz99]

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

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]

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: 

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 😍

[rigz99]

It still doesn't show up on my phone

[ThePrimeWeb]

Hey @rigz99,

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

[rigz99]

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

Thank you for the help !

[rigz99]

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 !