Change grid layout on footer DAWN THEME 4.0

Store Design

Topic summary

Goal: Adjust the Shopify Dawn theme 4.0 footer so the language selector occupies 50% of the 4th column, with two 50% blocks side‑by‑side.

Actions and solution:

  • Add CSS in Assets/section-footer.css via Online Store > Theme > Edit code.
  • Use a media query (@media min-width: 750px) to set .footer__blocks-wrapper { position: relative } and .footer-block:last-child { position: absolute; right: 0; top: 100px }.

Explanation:

  • The fix relies on absolute positioning of the last footer block rather than changing grid-column/grid-row.
  • The media query applies the layout only on wider screens.

Outcome:

  • The layout change works; the poster fine‑tuned the top offset using CSS calc().

Additional context:

  • An image illustrates the desired layout; the code snippet is central to the solution.
  • A linked, related issue notes that a secondary language is not displaying; this remains unresolved in this thread.

Status: Footer layout adjustment resolved. Language display issue open/ongoing.

Summarized with AI on February 21. AI used: gpt-5.
1

Hi there, im trying to implement new changes on footer from dawn theme 4.0. I used grid layout to modify footer, and i want to change that language selector to fill 50% of last 4 column, so in the 4 column should be 2 blocks 50% each one.

something like :

 grid-column: 4 / 5;
 grid-row: 1 / 2;

Is anybody able to guide me, i tried out some things but no lucky at the moment, i will show you with an image, what im talking about..

10.jpg
10.jpg1917×820 58.8 KB

2

Hi @SHIBdev ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

1 Like
3

@AvadaCommerce you got pm! Thanks in advance!!

4

Hi @SHIBdev

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-footer.css->paste below code at the bottom of the file:
@media (min-width: 750px) {
    .footer__blocks-wrapper {
        position: relative
    }
    .footer-block:last-child {
        position: absolute;
        right: 0;
        top: 100px;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
5

@AvadaCommerce Thanks for your help ! it works well, i made a little change on top, i added a calc() function, but yes definetly works!

PD: can you check this post ( https://community.shopify.com/topic/1534829 ) it’s related with this post, the issue is secondary language is not showing as well. Thanks!