Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS changes footer help - social button padding/ newsletter alignment


rspkm

Question

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

 

image.thumb.png.6d258d9980a4e7ec63638c49d0a25877.png

Edited by rspkm
UPDATE
Link to comment
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

10 answers to this question

Recommended Posts

  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

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

 

image.thumb.png.06d55faef6da181c86843d9fd9127ce7.png

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

image.thumb.png.436fd9431e17056b380bb87b079b73f6.png

Edited by rspkm
Link to comment
  • 0

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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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? 

Link to comment
  • 0
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)

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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

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