Phone space text format

[wakec]

Hi Armin!

Thanks for always being so responsive on here. I have a question about phone spacing for text formats.

I'm trying to get consistent padding around paragraph style text boxes in my projects, but no matter how I adjust the Phone Space Top and Phone Space Bottom values, my text boxes appear the same on mobile - a bit of extra space on top, none on the bottom. Any idea how to remedy this across an entire text style?

(had trouble uploading screenshots - see all text boxes after the first one here on mobile for an example)

[arminunruh]

hey!

the "space bottom" settings for textformats are the space that is below a paragraph.
however, if a paragraph is the last one in the text element.
then it has no space bottom.

otherwise you'd always have a extra space below a text.

customizing spacing can be done for example when u right click a text

or when u select a text and do the settings in the sidebar

so usually, if you only wanted to have different spacing for the texts in your phone layout,
i would say use a custom phone layout.
https://laytheme.com/documentation/custom-phone-layouts.html

but is probably easier to use custom css.

this for example would change all spacings below text elements in projects:

body.type-project .type-text{
margin-bottom: 100px!important;
}

add this in:
lay options -> custom css & html -> custom css for mobile

[wakec]

This CSS is great, that saves me from having to apply across each project page - is there a way to only apply it to one text style? It messes with other text elements like the page buttons and display text.

[wakec]

I'm also wondering if it's possible to edit the side margins on mobile as well - I tried

body.type-project .type-text{
margin-left: 40px!important;
}

body.type-project .type-text{
width: 285px!important;
}

but this only works at one breakpoint.

[arminunruh]

but the margin-left: 40px is applied

if you dont want the space for some texts,
right click the text element

click set html class and id. for class enter:

nospace

then instead of the css u use now, use:

body.type-project .type-text:not(.nospace){
margin-left: 40px!important;
}

body.type-project .type-text:not(.nospace){
width: 285px!important;
}