Minimum height for Layout Grid?

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
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Minimum height for Layout Grid?

Post by heynen »

I use Layout grids to place texts on the page, and every text has a photo as a background.

Question: Is it possible to set a standard height for each layout grid? At the moment, when one text is a bit longer, it will stretch the layout grid, so that this layout grid (with the photo as a background) will be higher than the layout grids with shorter texts. I want to achieve the same height for each layout grid.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Minimum height for Layout Grid?

Post by Pablo »

Right click the layout grid and select 'Object HTML'. Then add this code to custom style:

Code: Select all

min-height: 250px
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Minimum height for Layout Grid?

Post by heynen »

Thank you very much.

Can you help me to get the code working (my attempt failed). Let me first explain the layout of the page:

Image

There is one "master" layout grid that has two columns.

Inside these grid, there are several layout grids that have a photo as a background (and that contain texts). I want to set a minium height for all these layout grids. I have activated one of these and added the code that you mentioned, but it didn't work.

Would be great to get help on this. Thank you!
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Minimum height for Layout Grid?

Post by Pablo »

What is the URL of the page and to which object did you add the code?
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Minimum height for Layout Grid?

Post by heynen »

Thanks for your fast answer!
Unfortunately, the page is not online yet.

Here is the HTML code for the Layout grid that has the minimum height definition (I hope this helps already):

Code: Select all

 <div id="wb_LayoutGrid7" style="MinHeight=" 5000""="" onclick="window.location.href='./Lafontaine.html';return false;">
               <div id="LayoutGrid7">
                  <div class="col-1">
                     <label for="" id="Label2" style="display:inline-block;width:64px;z-index:23;">MEDIEN </label>
                     <div id="wb_Text9">
                        <span style="color:#FEFEFE;font-family:Lora;font-size:29px;letter-spacing:0.08px;line-height:33px;">Wie Spiegel Online Lafontaine das Wort abschneidet</span>
                     </div>
                     <div id="wb_Text10">
                        <span style="color:#FFFFFF;font-family:Lato;font-size:17px;line-height:18px;">Oskar Lafontaine findet deutliche Worte zur Krise der SPD.&nbsp; Das erfahren auch die Spiegel-Online-Leser. Doch eines erfahren sie nicht: Den Inhalt von Lafontaines Forderungen.</span>
                     </div>
                  </div>
               </div>
            </div>
            <div id="wb_LayoutGrid12">
               <div id="LayoutGrid12">
                  <div class="col-1">
                     <label for="" id="Label6" style="display:inline-block;width:115px;z-index:26;">ob/unt 10. Re/Li 5</label>
                     <div id="wb_Text13">
                        <h1 class="SchlagzeileTitelseite">Oben: 25<br>Lora 22. Ohne Abstand!<br>Unten: 15</h1>
                     </div>
                     <div id="wb_Text14">
                        <span style="color:#FFFFFF;font-family:Lato;font-size:17px;line-height:18px;">Oben: 0<br>Hier Lato 14, Abstand 1,1<br>Unten: 0<br>Layoutgrid: O 20, U 20. Gutter 10. Gesamt 313</span>
                     </div>
                  </div>
               </div>
            </div>
            
            
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Minimum height for Layout Grid?

Post by crispy68 »

Your style code is messed up.

Code: Select all

style="MinHeight=" 5000""=""
it should be (like Pablo stated):

Code: Select all

min-height:500px
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Minimum height for Layout Grid?

Post by heynen »

Oh, sorry - I sent you the wrong version.
Now I change it - but it does not work either, unfortunately.
I have now made a simple version with just two photos, so that I can send you the whole code.
Result is the same (height is not changed).
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Minimum height for Layout Grid?

Post by heynen »

Here is the code of the whole page:

Code: Select all

<html>
<body>
   <div id="container">
      <div id="ContentPlaceHolder1" style="background-color:#F5F5F5;z-index:23">
         <div id="Html1" style="position:absolute;left:1014px;top:11px;width:89px;height:32px;z-index:25">
         </div>
         <div id="wb_Image3" style="position:absolute;left:197px;top:739px;width:0px;height:0px;z-index:26;">
            <img src="" id="Image3" alt="">
         </div>
      </div>
   </div>
   <div id="wb_FlexBoxContainer1">
      <div id="FlexBoxContainer1">
         <div id="wb_Text1" onclick="window.location.href='./index.html';return false;">
            <span style="background-color:#FFFFFF;color:#4F4F4F;letter-spacing:14.5px;"><strong><a href="./index.html" class="Linkunsichtbar">FreiBlatt</a></strong></span>
         </div>
      </div>
   </div>
   <div id="wb_FlexBoxContainer2">
      <div id="FlexBoxContainer2">
         <div id="wb_Text2" onclick="window.location.href='./index.html';return false;">
            <span style="color:#000000;font-family:'Lato';font-weight:300;font-size:15px;letter-spacing:0.08px;"><a href="./index.html" class="Linkunsichtbar">Wir blicken hinter die Schlagzeilen. Gründlich. Unabhängig. Werbefrei.</a></span>
         </div>
      </div>
   </div>
   <div id="wb_LayoutGrid1">
      <div id="LayoutGrid1">
         <div class="col-1">
            <hr id="Line3" style="display:block;width:100%;z-index:2;">
         </div>
      </div>
   </div>
   <div id="wb_FlexBoxContainer3">
      <div id="FlexBoxContainer3">
         <div id="wb_Image1" style="display:inline-block;width:20px;z-index:3;">
            <a href="./index.html" title="Startseite"><img src="images/Home.png" id="Image1" alt=""></a>
         </div>
         <div id="wb_CssMenu1" style="display:inline-block;width:427px;height:34px;z-index:4;">
            <ul role="menubar">
               <li class="firstmain"><a role="menuitem" href="./Politik.html" target="_self" title="POLITIK">POLITIK</a>
               </li>
               <li><a role="menuitem" href="./Wirtschaft.html" target="_self" title="WIRTSCHAFT">WIRTSCHAFT</a>
               </li>
               <li><a role="menuitem" href="./Soziales.html" target="_self" title="SOZIALES">SOZIALES</a>
               </li>
               <li><a role="menuitem" href="./Medien.html" target="_self" title="MEDIEN">MEDIEN</a>
               </li>
               <li><a role="menuitem" href="./Ueber_uns.html" target="_self" title="&#220;BER UNS">&#220;BER&nbsp;UNS</a>
               </li>
            </ul>
         </div>
      </div>
   </div>
   <div id="wb_LayoutGrid2">
      <div id="LayoutGrid2">
         <div class="row">
            <div class="col-1">
               <hr id="Line1" style="display:block;width:100%;z-index:5;">
            </div>
         </div>
      </div>
   </div>
   <div id="wb_LayoutGrid4" style="-moz-box-shadow:1px 1px 7px #969696;
   -webkit-box-shadow:1px 1px 7px #969696;
   box-shadow:1px 1px 7px #969696;">
      <div id="LayoutGrid4">
         <div class="col-1">
            <div id="wb_LayoutGrid7" style="min-height:1000px" onclick="window.location.href='./Lafontaine.html';return false;">
               <div id="LayoutGrid7">
                  <div class="col-1">
                     <label for="" id="Label2" style="display:inline-block;width:64px;z-index:6;">MEDIEN </label>
                     <div id="wb_Text9">
                        <span style="color:#FEFEFE;font-family:Lora;font-size:29px;letter-spacing:0.08px;line-height:33px;">Wie Spiegel Online Lafontaine das Wort abschneidet</span>
                     </div>
                     <div id="wb_Text10">
                        <span style="color:#FFFFFF;font-family:Lato;font-size:17px;line-height:18px;">Oskar Lafontaine findet deutliche Worte zur Krise der SPD.&nbsp; Das erfahren auch die Spiegel-Online-Leser. Doch eines erfahren sie nicht: Den Inhalt von Lafontaines Forderungen.</span>
                     </div>
                  </div>
               </div>
            </div>
            <div id="wb_LayoutGrid13" style="">
               <div id="LayoutGrid13-overlay"></div>
               <div id="LayoutGrid13">
                  <div class="col-1">
                     <div id="wb_Text23">
                        <span style="color:#FFFFFF;font-family:Lato;font-size:13px;">POLITIK</span>
                     </div>
                     <div id="wb_Text20">
                        <span style="color:#FFFFFF;font-family:Lora;font-size:29px;letter-spacing:0.08px;">Soon, the US<br>will be the world's<br>Coronavirus epicenter.</span>
                     </div>
                     <div id="wb_Text21">
                        <span class="VorspannTitelseite">The number of cases will explode this week.&nbsp; Hospitals will be overburdened. Doctors will have to make a dreadful decision: Which patients will be abandoned?&nbsp; </span>
                     </div>
                     <div id="wb_Text22">
&nbsp;
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-2">
         </div>
      </div>
   </div>
   <div id="wb_LayoutGrid3">
      <div id="LayoutGrid3">
         <div class="row">
            <div class="col-1">
               <div id="wb_Text3">
                  <span style="color:#000000;font-family:Lato;font-size:17px;"><a href="./Ueber_uns.html#LayoutGrid11" class="Link" target="_blank">Impressum</a>&nbsp;&nbsp; <a href="./Ueber_uns.html#LayoutGrid14" class="Link" target="_blank">Datenschutzerklärung</a></span>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Minimum height for Layout Grid?

Post by crispy68 »

It would be easier if you only had the layout grid and not the other stuff on there. Which layout grid did you add it to? Is it Layout Grid 7 I'm looking at?

You can set a min-height but that is not going to help if the text in one of the columns gets taller and makes the cell bigger. Your first cell wont change but the 2nd will. The problem is, each cell does not have a height set to. The height is determined by the content inside. Setting CSS to just the ID of the layout grid doesnt work. It's the cells you need to target with the height.

You can add something like this to the page html between the <head> tags:

Code: Select all

<style>
#LayoutGrid1 > .row > .col-1,#LayoutGrid1 > .row > .col-2{height:500px;}
</style>
You may want to consider using flex grid.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Minimum height for Layout Grid?

Post by heynen »

Thank you!

I added the code to LayoutGrid7 (just for the test - in the end, I want to have it for several Layout Grids)

My aim: Several Layout Grids should have a minimum height. So, even if there is too little text inside, each Layout Grid would still have the minimum height.

At the moment, the minimum height code does not change anything: The Layout Grid will keep its height, even if I define a bigger minimum height. Why?
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Minimum height for Layout Grid?

Post by crispy68 »

in the end, I want to have it for several Layout Grids
Then you would need to add the above code for each layout grid.
My aim: Several Layout Grids should have a minimum height. So, even if there is too little text inside, each Layout Grid would still have the minimum height
Did my code above not work for you?
At the moment, the minimum height code does not change anything
If you change 'height' to 'min-height' in my code it works. However, keep in mind what min-height means. It simply means that its the minimum height but if the contents inside get bigger than the min-height, the height will change to accommodate it. So using min-height, you may still run into the problem of one cell bigger than another if the content in one is larger. You will need to add a media query to re-adjust the height in a breakpoint when the cell gets too big to keep them the same.

To be honest, I think the simplest way to accomplish what you want is to use a flexgrid in combination with breakpoints. There is no easy way to get a fixed height using layout grids in all layouts.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Minimum height for Layout Grid?

Post by heynen »

Hm, I tried on my page, but it did not work. Let me explain again, so that you can find a solution:

On my index page, I have a Layout grid with two columns. INSIDE these columns are several layout grids (they have just one column, and contain an image, a headline, and some text). It is these individual layout grids that should have a minimum height. How can I do this?

Here is an image of the page to give you an idea (the fotos with the rounded corners are the layout grids).

https://drive.google.com/file/d/1pW710S ... 9-sPJ/view

Thank you!

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

Re: Minimum height for Layout Grid?

Post by crispy68 »

I see what you are trying to do. Can you upload a demo project of just that page? It would be easier to see your setup and make suggestions based on what you have than me trying to re-create what you are doing.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Minimum height for Layout Grid?

Post by heynen »

Thanks!

I will have a version online this afternoon or tomorrow.
You are right: This will be easier!
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Minimum height for Layout Grid?

Post by heynen »

Now, the website is online
www.freiblatt.com

Maybe you can check how to solve the "minimum height" problem?
Thank you!

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

Re: Minimum height for Layout Grid?

Post by crispy68 »

As I stated before, can you strip down the project file to just the home page and upload that to the server (a different folder even) and provide a link to the project file so we can see your settings. Seeing it online helps see the problem but having the project file and knowing all your settings makes it easier to come up with a solution.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Minimum height for Layout Grid?

Post by heynen »

That sounds good!
Here is the file:

https://drive.google.com/file/d/1heB-QU ... sp=sharing
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Minimum height for Layout Grid?

Post by crispy68 »

So this is what you are after correct?

https://www.wizbangwebdesign.com/demo/news/


There are some other issues you also need to address.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Minimum height for Layout Grid?

Post by heynen »

Yes, thank you, exactly!
That looks great!

And help on other problems that I have is also much appreciated (site looks great in browser but has some problems on smaller screens, so breakpoints are not good at the moment).
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Minimum height for Layout Grid?

Post by crispy68 »

Well, to a certain extent your layout is more like a fixed layout than a floating layout since the grid is so rigid. Basically, the boxes are fixed width and height.

That being said, here are some issues to address that I saw. There could be others:

1. if you are using layout grids, flexbox, etc. the page alignment in the page properties should not be set to 'center horizontally'. Change this to 'do not center the page'.
2. I noticed the content placeholder on master frame had a color. I had to change this to transparent for it to look correct.
3. Your html box with all the style code for the layout grids was set to 'Use <div> to set position and size of the HTML'. This is incorrect. Style tags should be placed in the <head>. Change this to 'Between <head></head> tags.
4. In your HTML code box you have every layout grid with it's own style tags. Thats a bit redundant. You only need 1 set of <style></style> tags and everything else can be in between those. Also, if multiple ID's have the same attributes, you can combine them. For example, instead of:

Code: Select all

<style>
#LayoutGrid1 {border-radius:2%;}
#LayoutGrid2 {border-radius:2%;}
#LayoutGrid3 {border-radius:2%;}
</style>
you can write it like this instead:

Code: Select all

<style>
#LayoutGrid1,#LayoutGrid2,#LayoutGrid3{border-radius:2%;}
</style>

To get the fixed height of the grids, here is what I did to make it easy.
1. Give all the 'news' grids a specific ID (instead of using LayoutGrid1, LayoutGrid2, etc.). I used: news1, news2, new3, etc. It also makes it easier to find and understand in the object manager what you are looking for. I always say you should name the ID's of your objects with short descriptive names.
2. Open up the HTML code object and delete all your styles and replace it with the following:

Code: Select all

<style>
[id*="news"]{height:313px;border-radius:2%;}
</style>
This will give the above style to any ID that has the word 'news' in it. What this means is only give the news items this ID. Don't use the word 'news' in any other id's on that page. The height is set to 313px. How did i get this height? I looked at the 7 news items you had and went with the one that was the tallest. As you add new news items, you may have to change this height to match the tallest one.

Now, you may want consider using at least 1 breakpoint. The reason is at some point the text in the boxes are going to flow outside of the bottom (which is what you are probably noticing on mobile). To keep this from happening, simply add a breakpoint and in that breakpoint change the size of the font slightly so that it stays within the fixed height. Make sure you set the font to responsive fonts for this.
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Minimum height for Layout Grid?

Post by crispy68 »

Also, the issue with the font for your title is you are using Lato-Hairline. In looking at Google fonts, I don't see this as an option. Make sure to load in Lato into WB and use the 'thin' option.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Minimum height for Layout Grid?

Post by heynen »

Thank you!
Great points.

This does not only solve a number of problems, but it also makes my life much easier (e.g. clearer naming for the Layout Grids, just one definition for all the "News" grid format, instead of making this seperately!).

I make all the changes, and am looking forward to the result.

Thanks again

Malte
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: Minimum height for Layout Grid?

Post by heynen »

Dear Pablo and Crispy,

just wanted to send a big "thank you" to both of you!

Thanks to all your helpt, the page already looks great now. All the news items have the correct height (I love that clear design), there is a correct cookie message (thanks to the great plugin) and a working form to order a newsletter.

https://www.freiblatt.com/

All the tricks and hints that you sent me worked great.

All the best

Malte
Post Reply