Jump to content

how to reduce tops margins with custom css code

Go to solution Solved by tuanphan,

Recommended Posts

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 thisquestion.JPG

gabby example above the fold.JPG

Edited by Anandawhittier
Link to comment
  • Solution

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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!

 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.