Need help changing color of FEATURED COLLECTION header in home page | debut theme

Highlighted
Tourist
6 0 1

I have 2 issues with the featured collection header on home page on DEBUT theme.

first problem is that i want to change JUST the featured collection header COLOR without effect any other header( ex: ovrlay image headers).

second problem is  on the MOBILE VIEW. I have too short margin between the collection image to the header, and from the header to the next collection image.

how do i make it more wide?

0 Likes
Highlighted
Tourist
6 0 1

ANY HELP?

bump

0 Likes
Highlighted
Shopify Partner
3200 704 849

@sheffi9 

Please share your website URL. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
6 0 1

Aio4home.com

 

0 Likes
Highlighted
Shopify Partner
3200 704 849

@sheffi9 

Could you please provide both points screenshot? It will help to understand.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
6 0 1

the margin between the two image collection is too smallthe margin between the two image collection is too small

the margin between the 2 images is too small. 

also as you can see the color of the header "dining" is white color and not like the title "explore our selction".

and another problem is that i have inside the featured collection also a scrool bar. now i have one for the whole website, and one just for the collection. how do i remove the collection one?

0 Likes
Highlighted
Shopify Partner
3200 704 849

@sheffi9 

Please add the following code at the bottom of your assets/theme.css file

@media only screen and (min-width: 750px){
.collection-grid-item { margin-bottom: 75px !important; }
}

@media only screen and (max-width: 750px){
.collection-grid-item { margin-bottom: 75px !important; }
}

@media only screen and (min-width: 750px) {
.collection-grid-item__title { padding: 15px 15px !important; }
}

@media only screen and (max-width: 750px) {
.collection-grid-item__title { padding: 22px 15px !important; }
}

 

Hope this helps. 

I don't get scroll in images and "Dinning" text in white. did you change that?

Let me know.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes