Change Footer Block Width On Craft Theme

[donux7]

Hello, I am using Craft Theme and I have 3 boxes in my footer, 2 menu and 1 text. At the moment they all are the same width, but how I can make menu boxes more narrow and text box wider?

[GemPages]

Hello @donux7 

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

[BSS-Commerce]

Hi @donux7 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[donux7]

Thank you, our website URL is : https://ravenscraftsdecor.com

[BSS-Commerce · Accepted solution]

Hi @donux7 

Please follow these steps:

1. Login your Shopify account got to “Online store > Themes”

2. Click on the “Action” button and go to “Edit code”

3. Find the file “theme.css” or “base.css” and paste the following code at the bottom of the file

.footer-block:nth-child(1) {
	flex: 1 1 10%;
}
.footer-block:nth-child(2) {
	flex: 1 1 50%;
}
.footer-block:nth-child(3) {
	flex: 1 1 25%;
}
.footer-block li {
  padding: 20px 0px !important;
}

In which the code will adjust the length of each column in the footer, you can manually adjust the % of each column (you can manually adjust the % column as you like):

.footer-block:nth-child(1) {
	flex: 1 1 10%;
}
.footer-block:nth-child(2) {
	flex: 1 1 50%;
}
.footer-block:nth-child(3) {
	flex: 1 1 25%;
}

This code will adjust the width of the menu (we set it at 20px, but you can edit it yourself)

.footer-block li {
  padding: 20px 0px !important;
}

4. Save your code and check the result.

I hope that this can help you solve the issue.

[donux7]

It worked! Thank you very much for your help 🙂

[Derek_Bradley]

A genius, thanks - went through countless other answers trying to sort this and this knowledge you've shared has given me all the tools I need for flexibility in my footer!