What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Change Footer Block Width On Craft Theme

Solved

How can I adjust footer block width on Craft Theme?

donux7
Tourist
3 0 1

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?

Accepted Solution (1)
BSS-Commerce
Shopify Partner
3477 463 547

This is an 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”

view - 2023-02-06T114615.787.png

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 6 (6)

GemPages
Shopify Partner
5625 1262 1254

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

BSS-Commerce
Shopify Partner
3477 463 547

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
donux7
Tourist
3 0 1

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

BSS-Commerce
Shopify Partner
3477 463 547

This is an 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”

view - 2023-02-06T114615.787.png

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
donux7
Tourist
3 0 1

It worked! Thank you very much for your help 🙂

Derek_Bradley
Excursionist
12 0 0

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!