How to narrow gap between title and picture - Display on main page

[Dawn555]

I’m trying to figure out how to narrow these gaps on my main page. Any help will be highly appreciated!

Url：hookeroad.com

3. And there are gap between the 2 different sections, and how to remove this? I don’t know why this appears

[dmwwebartisan]

@Dawn555

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

@media only screen and (min-width: 750px){
.section-header {
    margin-bottom: 5px !important;
}
}
.jdgm-carousel-wrapper{
padding-top: 0px !important;
}

Hope this works.

[Dawn555]

Hi, thanks for your reply. But there are still most of gaps.

[DaisyVo]

Hi @Dawn555

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.css and add this code at the end of the file

.section-header.page-width.homepage_subtitle_style_match_header {
    margin-bottom: 0 !important;
}

Result

Best,

DaisyVo

[Dawn555]

Thank you for your help. I added the code following the steps you mentioned, but there still seems to be most of the gaps on the mobile end.

I really wonder if there are other ways to adjust.

[dmwwebartisan]

@Dawn555

Please add the following new code

@media screen and (min-width: 1200px){
.collection-list-section .section-header {
    margin-bottom: 0px !important;
}
}
.index-tabs-collections-wrapper .section-tabs-content {
padding-top:0px !important;
}

[Dawn555]

This is not easy

[DaisyVo]

Hi @Dawn555

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.css and add this code at the end of the file

@media (max-width: 768px) {
.product-card.product-card-wrapper {
    padding-top: 0 !important;
}

.product-card__image-with-placeholder-wrapper {
    margin-bottom: 0 !important;
}
.product-item--media {
    height: 355px !important;
}
}

Result:

Best,

DaisyVo

[Dawn555]

Thanks for your help.

This part improved a lot, but is it possible to narrow it down?