Jump to content

Customizing Font Sizes, Reducing Padding and Changing the Layout of the Newsletter Block in the Footer

Recommended Posts

Site URL: https://www.jaxmariephotography.com/

Hi!
Here is the list of things that I would like to customize in my footer:

  1. Increase the font size of the "JM" on the left side
  2. Decrease the amount of padding (space) slightly between each of the vertically stacked links (i.e. between "Pricing"/"Credits,"  "Contact"/"FAQ,"  and "Privacy Policy"/"Terms")
  3. Change the layout of the newsletter block to the pict attached below and invert the colors of the "Sign Up!" button when it is hovered over
  4. Decrease the amount of padding (space) between the social media icons and the newsletter block (see picture), around the line break, and around the text under the line break (email and copyright)

Also, I am using the Zion Template under "Photography."
I am a complete beginner when it comes to HTML so any help (with any of the customizations) would be greatly appreciated. Thank you!

*The first picture is a rough outline of what I would like my footer to look like and the second picture shows all the customizations to be made on the current footer.

proposed footer.PNG

modifications to be made.png

Link to comment
  • Replies 2
  • Views 1.4k
  • Created
  • Last Reply

Q1,2, 4. Add to Design > custom CSS

/* JM size */
div#block-yui_3_17_2_1_1608475351894_11240 h3 {
    font-size: 50px;
}
/* space between jm links */
div#page-section-5fdd03545e120c428cd05541 p {
    margin-top: 5px;
    margin-bottom: 5px;
}
/* space between social - newsletter */
div#block-yui_3_17_2_1_1608322095753_11149 {
    padding-top: 0;
}
div#block-yui_3_17_2_1_1612311677389_17174 {
    padding-bottom: 5px;
}

 

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
6 hours ago, tuanphan said:

Q1,2, 4. Add to Design > custom CSS


/* JM size */
div#block-yui_3_17_2_1_1608475351894_11240 h3 {
    font-size: 50px;
}
/* space between jm links */
div#page-section-5fdd03545e120c428cd05541 p {
    margin-top: 5px;
    margin-bottom: 5px;
}
/* space between social - newsletter */
div#block-yui_3_17_2_1_1608322095753_11149 {
    padding-top: 0;
}
div#block-yui_3_17_2_1_1612311677389_17174 {
    padding-bottom: 5px;
}

 

Thank you so much! It worked! But a couple more things:

  1. Is there a way to increase the space a little just between the link categories? I think the code you gave me for "space between jm links" works for the whole section. However, I would just like to increase the spacing between the jm links but not the spacing between the newsletter elements (text and email field blocks)
  2. Is it possible to decrease the space a little more between the social icons and the email address block and move the newsletter up a little on the footer (so it is higher than the top of the links)? My goal is to increase the space in Q1 between the links to match the height of the social links. Also, I would like to indent the social links so they align with the start of the email field in the newsletter block.
  3. I figured out some of the formatting for the newsletter block, but I was wondering if there was a way to darken the borders around the email field.

I apologize for all the questions, and I appreciate you so much for taking the time out of your day to help me. Thanks again!

1188588553_footermodifications2.thumb.png.8a6e2d9c9d7f7567e7882bcea0f0c8ed.png614518909_updatedfooterproposal.thumb.png.1cfb9feb7175beddff05d7ed02fb6d61.png

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.