Increase Footer Width

AI-generated summary

A user seeks to expand their footer to full screen width while keeping the rest of their site’s width unchanged, and also wants to reduce the footer’s overall size. They’re using the Cairo theme and have tried multiple CSS solutions from forum searches without success.

Solution Provided:
Another user offers custom CSS code targeting .ml_aos.ml_footer and .ml_footer_body.page-width classes:

  • Sets footer background color to black
  • Adjusts max-width to 80%

A screenshot demonstrates the result. The discussion appears resolved with the CSS solution, pending confirmation from the original poster.

I’m trying to increase the width of my footer so that it fills the screen. I don’t want to increase the width of the whole website, just the footer, so it doesn’t look silly.

If possible, I’d also like to decrease the size of the footer. You will see it is bigger than it needs to be.

I have tried dozens of codes from searches here, but none of them have worked. I hope someone has the right one.

I’m using the Kairo theme.

Website and Password:

www.littlepiggles.com

@Crossfit123!

Hi @HYBRID ,

To increase the footer width, please add the below css in your theme stylesheet.

.ml_aos.ml_footer {
  background-color: #000;
}
.ml_footer_body.page-width {
  max-width: 80%;
}

Result:-

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans