hannahnowlan

Hi @tuanphan,

Thanks. I have already decreased the newsletter block to as small as it goes, whilst still remaining in a single line (not stacked).

I am hoping to change the pre-determined width of each input field text box.
See image attached, I have highlighted in yellow lines the spaced areas between the input fields. I would like to reduce this spacing between them, but keep the newsletter box displaying in one line this this (not stacked).

Hi @tuanphan

In desktop view, is it possible to reduce the padding between the input/placeholder fields on my newsletter block? Ie. First name, last name, email address all sit closer together, at the moment they feel too far apart.

Thanks,

Hannah

landerse.au

Perfect, thankyou! @tuanphan

Hi @tuanphan

I am editing the Mobile Footer on my site.
I've successfully added some of your code from this thread to centre align the footer on mobile view. 
I'm still struggling to get the Accordian Title to centre (the description centre aligned is working well).

I also can't get the newsletter block input (placeholder) fields to centre align in mobile view.

And lastly, the 3 x text blocks at base of footer, I'd like these NOT to be centre aligned, is that possible?

URL: landerse.au

I have applied this code:

@media only screen and (max-width:640px){#footer-sections p {text-align:center !important;}}

/* accordion on mobile */
@media screen and (max-width:650px) {
span.accordion-item__title {
    text-align: center !important;}
.accordion-item__description * {
    text-align: center !important;}}

@media screen and (max-width:650px) { newsletter-block .newsletter-form-field-element::placeholder {
  text-align: center !important;}}

Thanks for your help,

Hannah

Thanks @tuanphan this code works great.

Do you have a similar code to target specific footer sections on other pages (not the homepage) transparent too?

Unfortunately, I've also just realised that this footer image is now appearing in all footers? ie. covering the original red homepage footer? Hmmmm, maybe it's just simpler if I stick with the standard red animated image footer for all site pages? What do you think?

Hi @Beyondspace

Thankyou! It is working much better now, there are some fine red dividing lines/borders left.

Let me know if these could be removed?

Also, not even sure if this could be possible but on my homepage, I'm using the footer background image with animation effects, is it possible to mimic these here too?

Red border?
I'm also wondering why the scale of the image seems zoomed in/larger in the footer than the original image (below). 

Hi @tuanphan Thanks so much, the code is working better now!
See screenshot on page landerse.au/gallery are you able to help resolve the section thats still red in colour?
 

Not sure if its possible but on the homepage I am using the background design edits to make the image animated, could that be possible to add to other pages using code?

Thanks,

Hannah

Hi @tuanphan 

Password: red

Hi again @Beyondspace

I've added the following to website css but it doesn't seem to be changing the background.
Have I done something incorrectly?

Also, it seems to be interfering with some of my other footer custom code.

Thanks for you help!

//Custom footer background image//
section[data-section-id="66015b5d26f89479f48e33b2"] footer .section-background-canvas.background-fx-canvas {  visibility: hidden;}

section[data-section-id="66015b5d26f89479f48e33b2"] footer .section-background-overlay {
  background-image: url(https://static1.squarespace.com/static/63fb26284dc33403d8683ef2/t/66022a309154a32f34e8497a/1711417914168/Stone.png);
  opacity: 1 !important;}

Please disregard this question, figured out the image URL 🙂

Thanks! I'll give it a go now.

What's the best way to create an image URL?

Hi @Beyondspace

Thanks for your reply.

And would I put this code in the website css or page advance code?

And, I'm guessing the footer section ID is directing where the code is affecting.
So repeat code with different footer section ID to target each different page?

Thanks,

Hannah

Any ideas? @creedon 🙏

Hi everyone,

I'm wondering if anyone has custom css to change the Footer Background Image for each page.

I have four different footer background images to suit different colour pages on my site.
ie. red image to match red page, cream image to match cream page. 

Would it be possible to use sample code below but to tailor it to target the footer background image instead?
That way I can add the specific image URL into each pages advance code?

Site URL: landerse.au
Password:  red

Thanks for your help,

Hannah

Hi, I'd also like my footer to be transparent on all pages to follow colour of each page. I'd tried implementing code 7.1 without .homepage but it doesn't seem to work, instead it tweaks other elements of the footer but not the background colour to tranparent as desired. Any help would be appreciated site URL is landerse.au

Fantastic, Thanks so much for your help @tuanphan!!

@tuanphan Would you be able to help?

Hi, I have a footer newsletter block, and I wish to edit the button hover with CSS.

The button has white text on a transparent background.
Upon hover, the button has a white background with transparent text.

I'm trying to remove the hover effect entirely, so the button stays white text transparent background when you click on it.

No codes I have tried seem to work.

button.newsletter-form-button.sqs-system-button:hover {opacity: 0 !important;}
(This blanks out the button upon clicking, removing background and font, but I want to keep the font)

Thanks for your help,

URL: https://landerse.squarespace.com/

Site password: red

Hey! Epic! This solves it once again, massive thanks!

Thanks so much; you have definitely solved my problem and created the click-to-reveal newsletter block as I hoped.

I will continue my attempts to realign the block, but the outcome is wonderful overall. Thanks again!

Please keep me posted if any additional CSS comes to mind to solve this alignment.

Fantastic!!! You're magic Creedon! Thanks so much.

Is it possible to re-position the newsletter block with CSS? To align it far right, (in line with the accordion block). It seems to be positioned to the left of the accordion, even though the accordion design settings are set to the right position.

Thankyou.

Are you able to clarify within your code the areas I still need to add?