Justify brand information text on mobile view (Dawn Theme)

Topic summary

A user seeks to justify brand information text in the footer on mobile view for their Shopify Dawn theme site.

Issue: The footer text alignment appears incorrect on mobile devices, though the desired outcome shows justified text with centered last line.

Solutions Provided:

Multiple CSS approaches were offered:

  • ProtoMan44 suggested adding CSS to target .footer-block__brand-info div.rte > p with text-align: justify within a mobile media query (max-width: 750px), placed in the custom CSS area.

  • Made4uo-Ribe initially provided desktop-only code, then corrected with a mobile-specific media query (max-width: 749px) targeting .footer-block__brand-info p with justified alignment and centered last line.

  • BSS-TekLabs recommended adding CSS to the base.css file targeting .footer-block__brand-info .rte with !important flags for justified text and centered last line.

Resolution: The user confirmed Made4uo-Ribe’s solution worked. All solutions involve editing theme CSS files (custom CSS area or base.css) with mobile-responsive media queries to achieve justified text alignment.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.

Hey, is there a way to make the brand information text justified on mobile view? I will add a picture of the issue and desired outcome below. I would appreciate any help with this!

My site: https://bellevodesign.com/

Issue:

Desired outcome:

1 Like

@bellevo hey, thanks for posting here.

@media screen and (max-width: 750px) {
 .footer-block__brand-info div.rte > p{
    text-align: justify;
 }
}

can you please put this code

1 Like

Hey, where do I add the code? Thanks in advance.

@bellevo put it in custom css area

or use it in css file.

1 Like

Hi @bellevo

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.footer-block__brand-info p {
    text-align: justify;
    text-align-last: center; 
    -moz-text-align-last: center; 
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like

Perfect thank you! I appreciate the help.

Your code worked as well but only on desktop version, I was looking for the mobile view version! Thank you for the help anyways.

  • Here is the solution for you
  • Please follow these steps:

  • Then find the base.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.footer-block__brand-info .rte {
     text-align: justify !important;
    text-align-last: center !important;
}
  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

Oh, forgot to add the media query.

@media only screen and (max-width: 749px){
.footer-block__brand-info p {
    text-align: justify;
    text-align-last: center; 
    -moz-text-align-last: center; 
}
}

And save.

1 Like