Solved

Change 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 Expert
3380 448 499

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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 6 (6)

GemPages
Shopify Partner
5587 1261 1192

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 Expert
3380 448 499

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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

donux7
Tourist
3 0 1

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

BSS-Commerce
Shopify Expert
3380 448 499

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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

donux7
Tourist
3 0 1

It worked! Thank you very much for your help 🙂

Derek_Bradley
Tourist
10 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!