Alignment of Headings and Text Blocks on Mobile

Ask the community
1

Hey everyone :wave:
maybe you can help me.

Observation:
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.

Issue:
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.

Solution:
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
2

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.

1 Like
3

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?

4

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

5

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:

<style>
.css-a5ea5k{
    text-align: left !important;
}
</style>