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:
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.
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:
@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
Hey, where do I add the code? Thanks in advance.
Hi @bellevo
Check this one.
.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!
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.
.footer-block__brand-info .rte {
text-align: justify !important;
text-align-last: center !important;
}
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.