Alignment of Headings and Text Blocks on Mobile

Hey everyone :wave:
maybe you can help me.

I’ve noticed that unfortunately, headings and text blocks in Hero sections are always centered on the mobile version, even if, for example, you’ve set them to left-aligned on the desktop.

I consider this to be problematic since it greatly limits the design options, and in many cases, left alignment is practical. To me, this appears to be a bug, and it should adopt the alignment choice made for the desktop view.

I’ve tried the following approaches: 1. Created list views and reduced them to a list while hiding all fields (you can choose the alignment in lists), but this results in longer loading times and is impractical. 2. Inserted simple text - however, there’s also an “issue” here as you can’t select font weight as you can in all other sections (only normal and bold). This disrupts the overall appearance.

Am I overlooking something? How could this be resolved?

1 Like

Agree with this, the mobile version should follow the desktop alignment. If we need to have a different alignment on mobile, we can simply create another block only visible for mobile.

Considering that best practice for landing pages is a left alignment (even on mobile), this is an annoying problem that seems like it could be fixed by softr easily.

Please fix this.

Following up on this … is there a way to override the formatting for mobile views when a mobile dedicated block is used?

I’m using a “Call to action with a button on the right” block and would like the CTA text to remain left-aligned.

I know that HTML can be written into the Title field, for example to make a word appear in bold text; can this be used to format the whole of it left-aligned, and how please?

Im guessing this can be accomplished with custom css in the header.

I have had chance to dig about using developer tools in my browser and as @StevenS has indicated, custom CSS in the header (I used site header) has given me a solution …

For a static “CTA with button on the right” (I deleted the button),

class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-8 MuiGrid-grid-lg-6 css-a5ea5k"

the custom CSS is:

    text-align: left !important;