Hello everyone!
I have dug deep and have changed the footer of the dawn theme to reflect the newsletter in a column, I am wanting to add the social media icons directly under the Newsletter.
I also want to add an additional menu to the lower area where the social media icons were.
Here is what my footer currently looks like:
and I created a mockup of what I want it to look like with the changes I mentioned:
I would greatly appreciate your help in solving this issue for me! Cheers!
Hello @diva35
It’s GemPages support team and glad to support you today.
You can follow these steps:
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
Add this code at the bottom of your base.css file
.list-social { justify-content: center !important; }
Then it will look like this image
I’m hoping to make all 4 columns equal width and the newsletter title and social icons justified to the left like the other columns.
Right now, my code for the newsletter section is:
@media screen and (min-width: 768px) {
.footer-block–newsletter {
width: 50%;
margin: 0 !important;
align-items: flex-start !important;
}
.footer__blocks-wrapper.grid.grid–1-col.grid–2-col.grid–4-col-tablet {
width: 50%;}
.footer__content-top.page-width {
display: flex;
flex-wrap: wrap;
}
}
You can modify the above code as follows:
@media screen and (min-width: 768px) {
.footer-block--newsletter {
width: 25%;
margin: 0 !important;
align-items: flex-start !important;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
width: 75%;
}
.footer__content-top.page-width {
display: flex;
flex-wrap: wrap;
}
.list-social{
justify-content: flex-start;
}
}
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
Hi @diva35
This is Victor from PageFly - Landing Page Builder App.
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file base.css
.list-social{
max-width: 36rem;
margin: 0 auto;
justify-content: flex-start !important;
}
Hope this answer helps.
Best regards,
Victor | PageFly
Hi! This code worked and made my footer look stellar on desktop, but i just noticed that when I toggled to mobile the help menu is not stacking under the logo. How can I fix this? Also, is it possible to center all of the menu items on mobile?
Hello @diva35
You can try the following code to edit the layout on mobile:
@media screen and (max-width: 750px) {
.footer-block.grid__item{
width: 100%;
}
}
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team