Hello,
I would like to make the changed displayed in the picture, can someone help me?
Thank you!
URL: https://suq5b8csct01fyzg-61270851797.shopifypreview.com/
Im using the Trade theme.
Topic summary
A Shopify store owner using the Trade theme seeks help repositioning Quick Links in the footer to match a reference image.
Solutions Provided:
Two community members offered CSS code to be added to the base.css file:
- First solution: Uses flexbox layout with media queries for screens 750px+ to reorganize footer content blocks and adjust text alignment
- Second solution: Similar approach with specific flex-basis percentages (40% for blocks wrapper, 60% for newsletter) and absolute positioning for the newsletter block
Current Status:
The discussion remains ongoing. The original poster reported spacing issues after implementing one of the solutions and shared screenshots showing the problem. However, troubleshooting stalled when the preview link expired, preventing further diagnosis. The helper requested an updated preview URL to continue assistance.
Key Technical Details:
Both solutions modify .footer__content-top, .footer__blocks-wrapper, and .footer-block--newsletter classes using flexbox properties and media queries.
@KimGottwald - please add this css to the very end of your base.css file and check
@media screen and (min-width:750px){
.footer__content-top {display: flex; flex-wrap: wrap;}
.footer-block__details-content li{display: block !important; text-align: left !important;}
.footer-block__heading{text-align: left !important;}
.footer__content-top .footer__blocks-wrapper{flex-basis: 50%;}
.footer__content-top .footer-block--newsletter{flex-basis: 50%;}
}
1 Like
- Here is the solution for you @KimGottwald
- Please follow these steps:
- Then find the base.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
@media screen and (min-width: 750px) {
.footer__content-top {
display: flex !important;
}
.footer__content-top .footer__blocks-wrapper.grid {
flex-basis: 40% !important;
}
.footer__content-top .footer-block--newsletter.scroll-trigger {
flex-basis: 60% !important;
}
.footer__blocks-wrapper .footer-block__details-content li {
display: block !important;
}
.footer-block--newsletter .footer-block__newsletter {
top: 0px !important;
position: absolute !important;
}
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
@KimGottwald - preview link expired, can you please share updated link?