Max width text block

[Anthony]

Hello

I'd like to create a text block that has a max width and then remain centred horizontally once the max width is reached.

Adding the max-width element is fine with a html class and custom css. However, I can't work out if there is a way to tell the text block to centre within it's allocated columns once the max-width is reached.

Any workaround possible to create this.

I would use the max width settings within Lay, but it is only text blocks that I want to stop scaling after a certain point.

Many thanks!

[mariusjopen]

Dear @Anthony
can you show us a rough sketch to illustrate your idea?

Best!

Marius

[edgrbnz]

I'm having a similar but different problem.

I have two classes which define different max-widths (for text-blocks) and have both assigned to different text-blocks on the same page. Wenn I scale the window these text-blocks don't stay in their gridder collumns and start free floating all around the page. (see screenshot)

The CSS I used is pretty simple:

._mw-500{
max-width: 500px!important;
}
._mw-600{
max-width: 640px!important;
}
._mw-1000{
max-width: 1000px!important;
}
._mw-1300{
max-width: 1300px!important;
}

[Anthony]

Hi Marius

Thanks for replying, I have created a test page to illustrate what I am trying to achieve. Also attached two marked up screen shots.

I want these blocks to alway appear in the centre of the browser window.

http://founded.design/testing-testing-123

Marked up screen shots:
http://founded.design/screen-shot-2018-08-07-at-11-10-38/
http://founded.design/screen-shot-2018-08-07-at-11-10-47/

Many thanks
A

[mariusjopen]

Dear @Anthony

you can use this to position the box.
It gets pushed 50% to the right and then gets pushed back 250px, which is the max-width.

.maxwidthtextblock {
    margin-left: calc(50% - 250px) !important;
}

Propably you need to play around with that for smaller screen sizes. But you can do that easily with MediaQueries or the Custom-mobile-CSS.

Let me know if that helped.

Best!

Marius

[Anthony]

@mariusjopen Thanks Marius, I ended up using auto for left and right margins. I hadn't used !important when trying before and this is working great now.

[mariusjopen]

Dear @Anthony
great! Happy to hear!

Marius