Dawn theme customization on custom coded vertical featured collection list

[Sivadarshan]

I'm using dawn theme latest version in that, I added an custom code vertical featured collection on my home page in that desktop view is good but, in mobile view in top taking more space, so how to reduce the space on top but no animation or cuttings should be there.

website: https://2512in.myshopify.com/

Password: 2512

Desktop View: 

Mobile View: ( I need to remove the white space marked in red color)

[DaisyVo · Accepted solution]

Hi @Sivadarshan 

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
@media screen and (max-width: 768px){
.featured-cards-container {
    height: 54vh !important;
}
.featured-cards-slider {
    top: 8vh !important;
    height: 100% !important;
    overflow: unset !important;
}
}
{% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.