Hello, I added the following code to the theme.liquid file in order to move the email signup block to the same row as the brand information and menu blocks in the footer but I need some help adjusting the width so that everything is spaced evenly.
html .footer__content-top .footer-block__newsletter {
text-align: left;
}
@media (min-width: 767px) {
html .footer__content-top {
display: flex;
justify-content: space-around;
}
html .footer__content-top .footer-block--newsletter {
align-items: start;
margin-top: 0;
}
}
@media (max-width: 767px) {
html .footer__content-top .footer-block--newsletter {
align-items: flex-start;
}
}
Current layout:
Desired layout:
URL: https://rencafenyc.com/
Hey @rencafenyc ,
I’ll help you adjust the footer layout to achieve the desired spacing. Looking at your HTML and current CSS, I can see we need to modify the grid system to get the newsletter block aligned with the other elements. Here’s the updated CSS:
.footer__content-top {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.footer__blocks-wrapper {
grid-column: span 3;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.footer-block--newsletter {
grid-column: 4;
align-self: start;
}
@media (max-width: 767px) {
.footer__content-top {
grid-template-columns: 1fr;
}
.footer__blocks-wrapper {
grid-column: 1;
grid-template-columns: 1fr;
}
.footer-block--newsletter {
grid-column: 1;
}
}
Key changes I made:
- Set up a main grid for the entire footer content
- Created a 3-column grid for the blocks wrapper (logo, empty block, and menu)
- Positioned the newsletter block in the fourth column
- Added responsive styling for mobile views
- Used gap for consistent spacing between elements
Feel free to reach out in case you’ve any questions for us, We’d love to help 
Cheers!
Shubham | Untechnickle
Hi, this is the result of adding your code:
It still does not match the desired layout image that was attached at the top of the post
