Unable To Align & Justify Footer Menu, Text & Brand Information Using Dawn Theme

[Sasha_D]

Hi,

Need help on the issue as I have tried suggestions from available codes shared by other posts but none were able to close the gap. If anyone could help, please share your expertise.

Help needed on:-

1) To align & justify Footer Menu, Text & Brand Information & Logo to be centered.

2) To center all Header & Sub-Text in the same footer section to be centered.

• Yellow line: Current center placement.
• Green line: Webpage/site centered line (this is the expected result point).
• Blue Arrows: Align Yellow line point to Green line point.
• Red Box Upper Row (Menu): Apart from aligning the blocks to be centered, header & sub-text of each blocks to be aligned/justify centered.
• Red Box Lower Row (Text & Brand Information): Align the blocks to be centered. Header & sub-text of each blocks currently seem to be aligned/justify centered already as desired.
• Logo: Currently seemed seem to be align & centered correctly using the editor console feature but TBC upon the rest of the blocks are aligned as expected result.
• Social Media Icons & Newsletter: Is at the right perfect spot centered at the middle section of the page/site. All the blocks above to be align should use the alignment here as a reference of the center point to be aligned to.

Below are some of the codes which I had added into base.css picked up from other posts:-

.footer-block--newsletter {

flex-wrap: wrap !important;

justify-content: center !important;

}

.footer-block__newsletter {

text-align: center !important;

}

form#ContactFooter {

margin: 0px auto !important;

}

ul.footer__list-social.list-unstyled.list-social {

justify-content: center !important;

margin-top: 10px !important;

}

<style>  

@media screen and (min-width: 1024px) {

.footer__blocks-wrapper .footer-block:nth-child(1) h2,

.footer__blocks-wrapper .footer-block:nth-child(1) li {

text-align: center !important;

margin-right: 0 !important;

}

.footer__blocks-wrapper .footer-block:nth-child(2) h2,

.footer__blocks-wrapper .footer-block:nth-child(2) li {

text-align: center !important;

margin-right: 0 !important;

}

.footer__blocks-wrapper .footer-block:nth-child(3) h2,

.footer__blocks-wrapper .footer-block:nth-child(3) li {

text-align: center !important;

margin-right: 0 !important;

}

.footer__blocks-wrapper .footer-block:nth-child(4) h2,

.footer__blocks-wrapper .footer-block:nth-child(4) li {

text-align: center !important;

margin-right: 0 !important;

}

.footer__blocks-wrapper .footer-block:nth-child(5) h2,

.footer__blocks-wrapper .footer-block:nth-child(5) li {

text-align: center !important;

margin-right: 0 !important;

}

}

@media screen and (max-width: 1024px) {

.footer__blocks-wrapper .footer-block h2 {

text-align: center !important;

}

.footer__blocks-wrapper .footer-block li a {

justify-content: center !important;

}

} 

<style>  

.footer-block__brand-info .footer__list-social.list-social {

    justify-content: center !important;

}

[Made4uo-Ribe]

Hi @Sasha_D 

Would you mind sharing your store URL? Thanks!

[Sasha_D]

https://healthygiftshub.com/

[Made4uo-Ribe]

Thanks for the info, do you have sample for the footer that you like to be or you just want it align center like this?

If not, let me know whar rearrangement that you like to change let see if its possible. Thanks!

[Sasha_D]

I don't have a sample of the expected result to be but what you have shown is almost there as the main header for each menu boxes are correctly aligned centered on the page layout as well as within the boxes. However, the sub-text on each menu boxes may require to be re-adjusted to justify the text to center as it doesn't look arranged evenly.