Align right text block to the right in Dawn theme

Store Design
,

Topic summary

A user seeks to align a footer text block (Contact section) to the right while keeping the menu aligned left in the Dawn theme.

Initial Solution Attempt:

  • PageFly-Richard provides CSS code targeting section-footer.css
  • Code uses media queries to adjust .footer__content-top .grid and .footer-block.grid__item properties
  • Sets justify-content: space-between and max-width: 300px

Problem:

  • First solution only pushes blocks further apart rather than achieving desired alignment
  • User provides screenshot showing the incorrect result

Revised Solution:

  • PageFly-Richard offers updated CSS code as replacement
  • New approach adds text-align: right to .footer-block.grid__item:last-child
  • Maintains space-between justification and 300px max-width constraint

Resolution:

  • User confirms the revised solution works with a brief thanks
  • Issue appears resolved with the second CSS implementation
Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi, how do I align the text block (Contact section) in the footer to the right (Keeping the menu aligned to the left)?

Screenshot 2023-02-16 at 15.36.18.png
Screenshot 2023-02-16 at 15.36.18.png2452×676 48.3 KB

URL: www.sunshinefoodsuk.com

Thanks

2

Hi @dan_hoo ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-footer.css->paste below code at the bottom of the file:

@media screen and (min-width: 750px) {
    .footer__content-top .grid {
        justify-content: space-between !important;
    }
    .footer-block.grid__item {
        max-width: 300px !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

1 Like
3

Hi @PageFly-Richard ,

This solution simply pushed the blocks further apart.

Screenshot 2023-02-16 at 15.47.31.png
Screenshot 2023-02-16 at 15.47.31.png2880×754 125 KB

Are you able to provide a solution that keeps the foot menu on the left and the contact block on the right - see below:

Screenshot 2023-02-16 at 15.48.15.png
Screenshot 2023-02-16 at 15.48.15.png1270×448 216 KB

Thanks

4

Hi @dan_hoo ,

I’m sorry to hear that. Please give it a try with this new solution:

You can replace previous my code by below code:

@media screen and (min-width: 750px) {
    .footer__content-top .grid {
        justify-content: space-between !important;
    }
    .footer-block.grid__item {
        max-width: 300px !important;
    }
    .footer-block.grid__item:last-child {
        text-align: right !important;
    }
}

PageFlyRichard_0-1676562925967.png
PageFlyRichard_0-1676562925967.png1242×384 16.8 KB

I hope it would help you
Best regards,

Richard | PageFly

1 Like
5

Thanks @PageFly-Richard

1 Like