how to reduce tops margins with custom css code

Site URL: https://manifestwithananda.squarespace.com/config/

On my squarespace site I am trying to achieve this effect in the photo (darker one) Being able to see my freebie above the fold. Which means adjusting negative top margins with custom css code. I'll need to identify the block ID for the image, then set a custom margin-top value. Butt I have no idea where to start. let me know if you know anything about this

Can you remove blue background in your question? Difficult to read.

Add this code to Home > Design > Custom CSS

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1588646609457_38073 {
    position: relative;
    top: -100px;
}
}

@tuanphan Thank you! That worked perfectly. I just adjusted the negative number in the code to get  it just right. Is there a way to move the text up as well? and remove the blank space to the bottom so its more like a strip of the colour just really small for a quick opt-in? Thank you!

Remove above code & add this

@media screen and (min-width:768px) {
/* image */
div#block-yui_3_17_2_1_1588646609457_38073 {
    position: relative;
    margin-top: -100px;
}
/* text */
div#block-be7ff7a68bb5f20c3715 {
    position: relative;
    margin-top: -100px;
    background: white;
}
}

15 hours ago, Anandawhittier said:

@tuanphan Thank you! That worked perfectly. I just adjusted the negative number in the code to get  it just right. Is there a way to move the text up as well? and remove the blank space to the bottom so its more like a strip of the colour just really small for a quick opt-in? Thank you!