Adjust alignment of footer menu links in dawn theme

[yasmineb]

Hi! I'm not a coder so please let me know where to add code and everything. My goal is to align all these quick links so that: 

1. Desktop view: Left column is right aligned, middle column is centered, and right column stays as is 

2. Mobile view: All columns are center aligned 

Is this possible? 

Website: hayatigoods.com

Password: uflaw

Thank you for your help!!

[MaverickStudio · Accepted solution]

Hey @yasmineb,

This is an easy and robust fix for the customization that you need!

Add the following to your base.css. Follow the images if you're not familiar with the edit code page 🙂

@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: right !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;
	}
}
@media screen and (max-width: 768px) {
	.footer__blocks-wrapper .footer-block h2 {
		text-align: center !important;
	}
	.footer__blocks-wrapper .footer-block li a {
		justify-content: center !important;
	}
}

 

Result:
    

[yasmineb]

This worked perfectly. Thank you!!

[Vinsinfo]

@yasmineb Please follow below steps to change the alignment for footer menu in mobile and desktop. Let me know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".

2. Click "Customize" button from the current theme.

3. Click "Footer" section.

4. Then scroll down and paste the below code in the "Custom CSS" field and save changes.

.footer-block--menu:nth-child(1) * {
    text-align: right;
}
.footer-block--menu:nth-child(2) * {
    text-align: center;
}
.footer-block__details-content>li:not(:last-child) {
    margin-right: 0rem;
}
@media screen and (max-width: 750px) {
    .footer-block--menu .footer-block__heading {
        text-align: center;
    }
    .footer-block--menu .list-menu__item {
        justify-content: center;
    }
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.