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 ?
1 Like
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.
Hey @rigz99 ,
Can you share the link to your store please? Thanks!
This is the link : https://e90fd7-56.myshopify.com/
Thank you for the help !
This is the link : https://e90fd7-56.myshopify.com/
Thank you for the help !
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 !
Hi @rigz99 , You want to reduce the white space in this section, right?
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 
It worked ! Thank you so much ! Can i ask another question ?
@rigz99 Sure, I’m happy to help you
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
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
1 Like
Thank you so much you’re a legend
1 Like
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
@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.
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
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
It still doesn’t show up on my phone