Jump to content

Issue with Social Links Overlapping Newsletter Block - Custom CSS Help

Recommended Posts

Site URL: https://www.anqi-wu.com/

Hello! For some reason I am having issues with figuring out how to fix this layout problem on my webpage.

The newsletter block and my social links are overlapping on top of each other. Is there some sort of custom CSS code I can input to fix it? As well, an additional small minor issues if anyone knows how to fix, the spacing within my newsletter block is a bit off. I'd like for there to be less space between the text and the email input box if that is something that can be adjusted?

The current template I am using for my webpage is Wells. I also currently have some custom CSS already to make some small esthetic tweaks to my newsletter and buttons which I'd like to keep, but just don't know how to fix the overlapping part.

The current custom CSS code I have is :
_______________
.newsletter-block .newsletter-form-header-title {
 font-size: 18px
}
.newsletter-block .newsletter-form-wrapper {
 padding: 23px 23px;
  border-radius: 42px;
}
.newsletter-block input {
 height: 3.4em;
 max-width: 20em;
 display: block;
}
.newsletter-block .newsletter-form-wrapper {
  height: 270px
}

.newsletter-block .newsletter-form-button {
 padding: 7px; text-transform: none; font-size: 0.9em;
  border-radius: 700px;
}

.sps-block-button .sps-block-button-element—medium {
  background-color: pink;
  border-radius: 50px;
  border: 2px pill;
  width:75%;
}
_______________

If anyone can happen to help that would be greatly appreciated. I've included a screenshot of how it currently looks with notes. The password for the website is tattoo2020 if anyone wants to take a look on the website.

Thank you!

screenshot.jpg

Link to comment
  • Replies 4
  • Views 486
  • Created
  • Last Reply
  • 2 weeks later...
3 hours ago, MissChi said:

Hello! Thanks for your response!

Yes I would still like help on this.

Thanks,

-Anqi

Add to Home > Design > Custom CSS

.newsletter-form-header-description p {
    margin-bottom: 5px !important;
}
.newsletter-form-fields-wrapper.form-fields {
    margin-top: 0;
}
div#footerBlocks-2 {
    margin-top: 50px;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.