Layout grid with fixed height

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
User avatar
crispy68
 
 
Posts: 355
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Layout grid with fixed height

Post by crispy68 » Thu Mar 08, 2018 12:48 am

Hey Pablo,

I've been utilizing fixed height for a layout grid and here is my simple setup:

I have a 4x4x4 layout grid. I set the background of each column to an image. I place a text block with some top padding in each column to give the layout grid some height. Each text block is the same height. So for example, lets say the text block has a height of 300px. Thus the height of the layout grid is 300px.

I have BP's set up at 1366, 1024, 768 and 480. The layout grid switches to stacked mode at 1023px.

What i've noticed is when the layout grid is horizontal, the height of the grid is the same height in 1366 and 1024 even if I change the height of the text box in the BP's. So for example, if the height in default view is 300px and I want to change the height in the 1024BP to 200px it still shows up as 300px in that BP.

Once the layout grid goes to stacked mode though, you can have different heights in the BP's. So for example, in the 768BP I can have it 200px and in 480BP I can have it at 100px if I want and it looks correct.

Hope this makes sense. What I would like is to be able to change the fixed height in each BP when it is horizontal. Is this possible or can it be added in a future update? I can submit a demo if needed.

User avatar
Pablo
 
Posts: 13926
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Layout grid with fixed height

Post by Pablo » Thu Mar 08, 2018 7:06 am

Please share your project file so I can see what you have done.

User avatar
crispy68
 
 
Posts: 355
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout grid with fixed height

Post by crispy68 » Thu Mar 08, 2018 11:31 pm

Hi Pablo,

You can download the test project here: https://tinyurl.com/y8gjvlcc

The 3 images for the background of each column in the layout grid is included.

What you will see is in the default layout (1366px) and 1024px BP, the layout grid has a height of 360px which is controlled by the text objects in the grid with padding. In the 768px BP, I changed the padding of the text objects to be smaller so the layout grid has a height of 262px. In design, it looks correct.

In the 480px and 320px BP, it is in stacked mode. In the 480px BP, the height of each column is 162px and in 320 BP it is 312px high.

When previewed, everything is the same height until it goes into stacked mode.

User avatar
Pablo
 
Posts: 13926
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Layout grid with fixed height

Post by Pablo » Fri Mar 09, 2018 7:54 am

First note that there is a conflict in your settings.
The breakpoint of the layout grid conflicts with the page breakpoints.
If the page has breakpoints then the layout grid's breakpoint should be set smaller then the smallest breakpoints.

If you enable 'fixed height columns' then the height in the CSS will be fixed to the height in the default view, this will not affect the layout in WWB. All it does is add 'height: --px' to the CSS.
This value is currently not responsive. So for the published page each breakpoint the grids cell will have the same height (if there are no conflicts in your breakpoints).

User avatar
crispy68
 
 
Posts: 355
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout grid with fixed height

Post by crispy68 » Fri Mar 09, 2018 2:19 pm

Hey Pablo,
First note that there is a conflict in your settings.
The breakpoint of the layout grid conflicts with the page breakpoints.
If the page has breakpoints then the layout grid's breakpoint should be set smaller then the smallest breakpoints
I'm confused by this statement. If i'm understanding you correctly, you are saying the breakpoint in my demo for the layout grid should be less than the 320 breakpoint? This doesn't make sense to me as the content in the layout grid would be way too skinny. I choose BP's based on the most common sizes of devices and how I feel the content will best look. You set the breakpoint in the layout grid at the point and time in your design the content needs adjusted.

In my demo, I am using min-width in the CSS and I have a BP at 768 so anything at that point up to 1365px will see that layout. However, once the display hits below 768px (ie: 767px), I want the layout grid to switch to stacked mode. I've used it this way in all my projects and it works very well. I would think the BP of a layout grid should be independent of the page BP's anyway.

Once the layout grid goes into stacked mode, the columns are responsive in height. Is it possible to have the layout grid responsive when it is horizontal as well? Why? Because in default view I might want it to be 400px high but by the time it gets down to the 768BP, I may only want it to be 250px high as it will look better.

User avatar
Pablo
 
Posts: 13926
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Layout grid with fixed height

Post by Pablo » Fri Mar 09, 2018 2:35 pm

I'm confused by this statement. If i'm understanding you correctly, you are saying the breakpoint in my demo for the layout grid should be less than the 320 breakpoint?
Correct. Otherwise it will conflict with the page breakpoint.

If the page has breakpoints then the Layout Grid can have a different number of columns in each breakpoints, so this will override the breakpoint behavior of the grid itself. Therefore, the layout gird's breakpoints should be lower than the page smallest page breakpoints,.
If you want to switch to column view you should set number of columns in the breakpoint to 1 and overflow to '100%'.
If you do not use breakpoints in the page then breakpoints of the grid will do that.

Related tutorial:
http://wysiwygwebbuilder.com/layoutgrid_advanced.html
Is it possible to have the layout grid responsive when it is horizontal as well?
At the moment this is not possible, but I will consider adding this to a future version. However it will be difficult, because a layout grid can also have overflow columns. Those can only have an auto height.

User avatar
crispy68
 
 
Posts: 355
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout grid with fixed height

Post by crispy68 » Fri Mar 09, 2018 4:51 pm

If you want to switch to column view you should set number of columns in the breakpoint to 1 and overflow to '100%'.
I've read the tutorial and will play around with this as I've never messed with the overflow. As it is, setting the BP where I want it to change to stack mode seems to work well and I've never had a problem with it but I will try your suggestion.

I see there is a demo of the tutorial but not sure if addresses exactly what i'm trying to do but will check it out. Would it be possible to use the example I sent to illustrate this?

Thanks,

User avatar
Pablo
 
Posts: 13926
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Layout grid with fixed height

Post by Pablo » Fri Mar 09, 2018 5:50 pm

Here is the modified version of your project:
https://www.wysiwygwebbuilder.com/suppo ... utgrid.zip

User avatar
crispy68
 
 
Posts: 355
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout grid with fixed height

Post by crispy68 » Sat Mar 10, 2018 1:22 am

Hey Pablo,

I took a look at the demo you changed and I understand what you are doing now. With the way you did it, the height in default is the height in every breakpoint. With the way I was doing it, I was able to achieve different heights when in stacked mode just not when it was horizontal. For whatever reasons, it works and is 50% of what I want.

The way I look at it is as your screen size gets smaller, you more than likely are not going to want the default height to be the same at a mobile size as it's just too big. Plus, by using background images in the columns it throws off the aspect ratio as horizontally it's getting skinnier but the height doesn't change. In any event, I will have to decide how I want to proceed for now. If there is a future workaround, that would be great.

However, now that I've had a chance to look at the overflow options, it has turned on a light bulb for other possibilities that I hadn't thought about and may make for some more interesting layouts.

I took a look at your LayoutGrid_Advanced demo and see that you demonstrate 3 overflow options. The 'Hidden/Visible' and 'Custom' option makes sense to me. However, I am perplexed by the 100% option (LayoutGrid2 in your demo) on how you achieved the layout you did with 3 objects on the first line and the 4th on a separate row in default view. I tried to duplicate this and cannot figure out the steps to achieve this. Would it be possible to explain how you did this? I can't seem to figure out how you got '2-4' to wrap to a line of it's own full width. What causes it to wrap? Do the settings in other BP's have any effect on the other BP's? In the description it says 'Multiple over columns will result in multiple rows.' I'm not sure I 100% understand what you mean by this.

thanks.

User avatar
Pablo
 
Posts: 13926
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Layout grid with fixed height

Post by Pablo » Sat Mar 10, 2018 6:56 am

Do the settings in other BP's have any effect on the other BP's?
The maximum number of columns of all breakpoints will be the base of the layout grid. Because there is only one grid, so all breakpoints count.
I have added a forth (hidden) column in the 480 breakpoint. In the default view all extra columns are set to overflow 100%.

Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests