Jump to content

Footer Content Full Width

Recommended Posts

  • 1 year later...
20 hours ago, HyperX said:

Hi tried this code but it doesn't seem to work for the Bryant template to extend the Footer width so its the same as the header. Please help if you can

 

Hi. Can you share link to your site? We can check easier

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

Hi. Can you share link to your site? We can check easier

Thanks so much for the reply. I have not published the site yet but it's the problem with the current site (Bedford Template), link below:

www.rovr.systems

Please let me know if you can help with a code.

 

 

Link to comment
On 7/27/2021 at 10:40 PM, HyperX said:

Thanks so much for the reply. I have not published the site yet but it's the problem with the current site (Bedford Template), link below:

www.rovr.systems

Please let me know if you can help with a code.

 

 

Add to Design > Custom CSS

/* FUllwidth footer */
.footer-inner {
    max-width: 100% !important;
}

 

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
  • 2 years later...

@tuanphan Hello! I tried both of the above codes on my site but neither of them seem to be working. I am looking to have my whole footer match the width of my site. The project thumbnails, logo in top left, and shopping cart in top right. Is there a different code that you might be able to provide that would work?

https://adamnienow.com

(your help is always appreciated- you have helped me in the past 🙂

Screen Shot 2023-12-14 at 9.27.50 AM.png

Link to comment
On 12/15/2023 at 12:24 AM, NienowBrand said:

@tuanphan Hello! I tried both of the above codes on my site but neither of them seem to be working. I am looking to have my whole footer match the width of my site. The project thumbnails, logo in top left, and shopping cart in top right. Is there a different code that you might be able to provide that would work?

https://adamnienow.com

(your help is always appreciated- you have helped me in the past 🙂

Screen Shot 2023-12-14 at 9.27.50 AM.png

Add to Website Tools (under Not Linked) > Custom CSS

footer#footer {
    max-width: 100% !important;
}

 

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
  • 1 month later...

Hi @tuanphan

I'm trying to achieve the same but it does not work for my site.

I want the footer to span the full width of the viewport, with a divider line, same as the header. I've tried the following code in the Custom CSS: 
 

footer#footer-sections .content-wrapper {
    max-width: 100%;
}

 

footer#footer {
    max-width: 100% !important;
}

Some help would be much appreciated!

Edited by frenja78
Link to comment
On 1/22/2024 at 12:39 AM, frenja78 said:

Hi @tuanphan

I'm trying to achieve the same but it does not work for my site: www.malinnea.design

I want the footer to span the full width of the viewport, with a divider line, same as the header. I've tried the following code in the Custom CSS: 
 

footer#footer-sections .content-wrapper {
    max-width: 100%;
}

 

footer#footer {
    max-width: 100% !important;
}

Some help would be much appreciated!

You can use this code to Custom CSS

footer#footer-sections {
    border-top: 1.5px solid black;
}
footer.sections {
    --sqs-site-max-width: 100% !important;
}

 

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
  • 2 months later...

Hi @tuanphan, Just wondering if you can help me.  I have tried all these different codes. All I want to do is make my newsletter footer go across the screen at the bottom or at least not be squished all on the left side and instead be justified in the middle. Right now it only goes half way and looks really odd. It especially looks bad on a phone only going half way across. Any help here would be appreciated I've spent hours trying to figure this out. Thank-you, my website url is https://www.sarahhopeart.com/home

and my template is Avenue version 7.0

 

screenshot troubleshooting newsletter footer.png

Edited by SarahHope
Link to comment
On 4/6/2024 at 3:57 AM, SarahHope said:

Hi @tuanphan, Just wondering if you can help me.  I have tried all these different codes. All I want to do is make my newsletter footer go across the screen at the bottom or at least not be squished all on the left side and instead be justified in the middle. Right now it only goes half way and looks really odd. It especially looks bad on a phone only going half way across. Any help here would be appreciated I've spent hours trying to figure this out. Thank-you, my website url is https://www.sarahhopeart.com/home

and my template is Avenue version 7.0

 

screenshot troubleshooting newsletter footer.png

Use this CSS code

div#footerBlock {
    width: 100% !important;
    margin-top: 10px;
}
footer#footer {
    display: flex;
    flex-direction: column-reverse;
}

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

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