How do I adjust footer content block positions on my website?

[Kuelah]

Hello all,

I’m working on customizing the layout of my website’s footer, and I’m encountering a challenge with repositioning the content blocks. Specifically, I want the leftmost block to be 50px away from the left edge of the screen, and the rightmost block to be 50px away from the right edge of the screen, as shown in the image below:

I’ve attempted to achieve this with the following CSS code, but it seems that there is a problem with the relations to each other:

.footer__content-top {
  width: 100vw;
  display: flex;
  justify-content: space-between;
  padding-left: 50px;
  padding-right: 50px;
  position: relative;
}

.grid div:nth-child(1) {
  position: absolute;
  left: 0;
}

.grid div:nth-child(4) {
  position: absolute;
  right: 0;
}

A helpful Shopify employee gave me the advice to set a flexbox, but so far that doesn’t work for me either.

Could someone please assist me in achieving the desired layout? I am not really into coding…

Thank you in advance!

DAWN THEME

[David_SHT]

Hi @Kuelah

This is David at SalesHunterThemes.
To expand the content width

Follow this path:

Themes => edit code => asset => base.css

and add this code to bottom of the file base.css

.footer .footer__content-top {
max-width: 100%!important;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

[Made4uo-Ribe]

Hi @Kuelah

Would you mind to share your Store URL website? with password if its protected. Thanks!

[Kuelah]

Hi @Made4uo-Ribe

Sure: https://adapte-clothing.com/

Password: 166#19

[Kuelah]

Hi @David_SHT

Thank you so much, that already helped me, to get the block to 100%.

But when i try to add the 50px distance it still affects all the content blocks…

[Kuelah]

I made the following sketch. I want to reposition every content block like this:

But as i move one content, all the other are messed up…

[Made4uo-Ribe]

Thank you for the information. Currently it have 5rem padidng from the page width, then I add 50px margin as what youve tell. Check this one.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.footer__content-top.page-width {
    margin: 0 50px;
}

• And Save.

• Result:

• 

• The result for mobile wont be nice it will squeeze in.

[Kuelah]

Many thanks. That seems to work. One thing more.

Do you know, how to move the single content block (over all 4) independently of each other.

Because when i now want to move the fourth block for instance (div:nth-child(4)) then it confuses all the others..

My plan is to move all block like this one:

[Made4uo-Ribe]

Check this one then.

#shopify-section-sections--19474238603587__footer > footer > div.footer__content-top.page-width > div.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in > div:nth-child(3), #shopify-section-sections--19474238603587__footer > footer > div.footer__content-top.page-width > div.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in > div:nth-child(4) {
    align-self: flex-end;
}
.footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in {
    width: 13%;
}

And Save.

Result:

[Kuelah]

Many many thanks @Made4uo-Ribe . Great it works!

Just one little extra. Is it possible to move the Copyright at the bottom of the to the left side of the leftest fotter content block like

But not necessary.
Thank you for the solution