Shopify themes, liquid, logos, and UX
Hi, i just got some issue with my footer, my newsletter just got out of the alignment, i need some help because im getting tired
the code i put in assets > base.ccs
@media only screen and (min-width:1200px){ .footer-block--newsletter.scroll-trigger.animate--slide-in { flex-direction: column; margin-top: 0px; width: -100%; } .footer-block__newsletter { margin-left: auto; margin-right: -100px !important; } ul.footer__list-social.list-unstyled.list-social { align-self: flex-start; margin-bottom: 0px; } .footer__content-top.page-width { display: auto; margin-top: 0px; } .footer-block__newsletter { width: max-content; } .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in { gap: 0px; } } @media screen and (min-width: 1200px) { .footer-block__brand-info { margin-left: -200px; } }
Solved! Go to the solution
This is an accepted solution.
hey, i just solve the problem but thanks for try to help me
i use this code
@media only screen and (min-width:1200px){
.footer-block--newsletter.scroll-trigger.animate--slide-in {
flex-direction: column;
margin-top: -190px;
width: 1275px;
margin-bottom: 100px;
}
@media screen and (min-width: 1200px) {
.footer-block__brand-info {
margin-left: -175px;
}
}
the result:
@Z18 could you please share your store URL?
@Z18 Added CSS and your footer structure is not as per requirement. Could you please keep all the divs of footer in the same div? so it'll easily manage using the CSS
ok, done, tell me if you need more information or something, thanks for replying me
@Z18 if we update the CSS then it overlaps some of the contents. Please check attachment
looks nice, but yes, there is an overlap in the brand information, ¿it is a possibility to align every box in a proper way?
This is an accepted solution.
hey, i just solve the problem but thanks for try to help me
i use this code
@media only screen and (min-width:1200px){
.footer-block--newsletter.scroll-trigger.animate--slide-in {
flex-direction: column;
margin-top: -190px;
width: 1275px;
margin-bottom: 100px;
}
@media screen and (min-width: 1200px) {
.footer-block__brand-info {
margin-left: -175px;
}
}
the result:
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025