Row Height Options
It would be great to set specific row heights in percentages (based on browser height).
Rows below 100% browser height could behave as standard rows, and any set above 100% behave the same as 'Set to browser height' does now.
This additional level of control over rows would be a great addition to the theme.
yes. Thank you for the valuable input.
We write it down for future improvement.
All the best!
is there alreday an option to play with the hight of a row? Would be happy to use it :)
Normally the Row's height is determined by its contents and its good that it works this way. An option was added long ago to "use browser height as row height' to facilitate the needs like @Anthony mentioned. If a row needs a specific height you could give the Row a custom ID or Class then using Custom CSS - target that row specifically and set its height to whatever you wish based on pixels (px) percentage (%) viewport height (VH) or even a :Calc() function - so the options to customize are available to users :)
Could changing the row height be a feature for the future?
It would be really great if this was possible and as easy to do as it is now to change the row gutter.
For example: I will need this quite often, when there is a background image with text over it. It looks a lot nicer when there is a bit of space around the text but for that the row/the image height would have to be greater than the text.
I have tried using the text field for this but haven't managed to get it right that way.
I don't know how to use Custom CSS unfortunately and if I have to do this for every row with text it would take a lot of time.
The option to easily change the row height would really save a lot of time and improve the design options a lot.
Thank you for the concise post and your thoughts. I have added to the development notes along with this thread. Even though it is indeed a valid idea, i cannot guarantee when or if this feature arrives sorry.
This post is deleted!
This post is deleted!
This post is deleted!
Hey @Richard ,
you can disregard my earlier post, I did find the "easy solution" and have managed to get an ok result with adding margins in the CSS now.
There is one last thing I'm wondering about this though.
Is there a way to get the width of the custom CSS side margins from one section to match the column width of my grid layout from other sections?
I have 31 columns and usually use 29 with 1 empty one on each side.
I have seen in the html code for other sections that it says "span-29".
Can I use this in the CSS for the custom margin somehow too, so it would match the other sections?
I have now set the custom margin to 4vw, which on 100% view size on my laptop looks similar to the other sections "margins" (where I used 29 columns). But when I change the view to a lower % then the custom code margin stays a lot bigger than the other "column margins" from my other sections.
Here is the link, the section that says "Need a soundtrack ..." is the one where I would like to change the margin to match the column count of 29.
Thanks so much!
Unsure if the intended CSS is working for you on different viewport widths:
Because this is based on Custom CSS i may have to come back later sorry when I am able, unfortunately I cannot currently! 🌝
I Hope if others have insight they will post please
It seems to me that there is no answer here but subject is still related.
My home page is divided in 2 columns (50%each)
On each one, I would like to create square space that will be
- width (49% page width)
- height (49% of page width -- NOT PAGE HEIGHT)
in each square i will add sometime text, big or small images.
It cannot be px-fix neither height-related because I would loose the square-grid that give me this structure.
Hope this is well explained
and you ll be able to give me an easy to follow solution (im no coder, just photographer)
Looking into Viewport Units would likely be very helpful 🌝
You can calculate dimensions based on your browsers screen size = VH & VW ( Viewport Heights & Viewport Width ).
Also this should help when needing to apply this CSS to Lay Theme Elements:
Hope this helps and have a wonderful day Lucas 🌝
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:
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