CSS changes footer help - social button padding/ newsletter alignment

Site URL: https://accordion-clarinet-5wnf.squarespace.com/

Hi..  need to make some final amends to the site and have added lots of custom css but some items i just can't find info for...would be great if I could get some help. 

pw hedrasite

accordion template originally 
3. TEXT/SOCIAL TO SIT CENTRAL IN THE SECTION
4. PADDING AROUND THE SOCIAL BUTTON TO MATCH THE TEXT GAP ABOVE / SIT IN LINE
5. REDUCE PADDING TO NEWSLETTER HERE AND MOVE UP TO ALIGN ACROSS WITH TEXT ON THE LEFT SIDE
6. 1PX BOX TO JOIN BUTTON AAND SIZER TO MATCH EMAIL BOX + EMAIL TEXT TO BE BLACK NOT GREY

if you create 20 posts, or more post with 2-3 problem/post, we can help easier..

What is access password?

thanks

pw - hedrasite

ok if you think it will be quicker

#3. You mean equal top/bottom padding?

#4. Add to Design > Custom CSS

/* FOOTER Social block padding*/
footer.sections .socialaccountlinks-v2-block {
    padding-top: 0 !important;
}
div#block-yui_3_17_2_1_1630182750098_11626 {
    padding-bottom: 5px;
}

#5. Add to Design > Custom CSS

/* footer newsletter padding */
.newsletter-form-body div {
    padding-top: 0px !important;
}
.newsletter-form-header-description p {
    margin-bottom: 0px !important;
}

#6. Add to Design > Custom CSS

/* footer newsletter button */
footer.sections button.newsletter-form-button {
    border: 2px solid #000 !important;
}
footer.sections button.newsletter-form-button * {
    color: gray;
}

thanks so much for the help.. will review these now

yes for 3 i mean equal top bottom no matter how many items i add

also  the name date appear in the middle for the moible but i want it at the bottom

Try adding to Design > Custom CSS

/* Equal footer top bottom padding */
@media screen and (min-width:992px) {
div#page-section-61268bf110929668d22d0b6d .span-12>.row {
    display: flex;
    align-items: center;
}
footer.sections .content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
}

With name date appear.

It looks like you solved?

On 9/5/2021 at 3:06 AM, tuanphan said:

Try adding to Design > Custom CSS

/* Equal footer top bottom padding */
@media screen and (min-width:992px) {
div#page-section-61268bf110929668d22d0b6d .span-12>.row {
    display: flex;
    align-items: center;
}
footer.sections .content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
}

With name date appear.

It looks like you solved?

footer css worked great there for padding thanks , just need the enter email text to be black and i cant see that covered in site styles?

in the mobile view the base site text still goes to the middle? 

On 9/6/2021 at 10:08 PM, rspkm said:

footer css worked great there for padding thanks , just need the enter email text to be black and i cant see that covered in site styles?

in the mobile view the base site text still goes to the middle? 

Hi.

Your site is expired. You can contact Squarespace Customer Care to extend it (free)

On 9/8/2021 at 9:13 AM, tuanphan said:

Hi.

Your site is expired. You can contact Squarespace Customer Care to extend it (free)

Hi, yep they added 4 weeks on thanks

Hi,

Your problem now is center all elements in footer mobile & move copyright under email?

Add to Design > Custom CSS

/* Mobile footer */
@media screen and (max-width:767px) {
footer.sections * {
    text-align: center !important;
}
div#page-section-61268bf110929668d22d0b6d .span-12>.row {
    display: flex;
    flex-direction: column;
}
div#page-section-61268bf110929668d22d0b6d .span-12 .span-4:nth-child(2) {
    order: 3;
}
}

On 9/12/2021 at 9:06 AM, tuanphan said:

Hi,

Your problem now is center all elements in footer mobile & move copyright under email?

Add to Design > Custom CSS

/* Mobile footer */
@media screen and (max-width:767px) {
footer.sections * {
    text-align: center !important;
}
div#page-section-61268bf110929668d22d0b6d .span-12>.row {
    display: flex;
    flex-direction: column;
}
div#page-section-61268bf110929668d22d0b6d .span-12 .span-4:nth-child(2) {
    order: 3;
}
}

 

yes this will do thankyou so much!
got lots of shop amends to do but not received product photos yet.. back soon

Hi @rspkm,

I see that you may have used some custom code to try to create an accordion on your site and it caused some unexpected issues. I'm glad that @tuanphan was able to help you sort them out! For future reference, I'm happy to say that should you want to add an accordion to your site without additional code, you can do so using the accordion block! We have some information about the possibilities and customizations of the accordion block in our guide "Accordion blocks" should you want to take a look.