Max width text block
-
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!
-
-
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; }
-
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 -
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
-
@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.
-
Dear @Anthony
great! Happy to hear!Marius
Before you post
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it