Minimum height for Layout Grid?

heynen · Post by **heynen** » Thu Mar 26, 2020 10:27 pm

Now, the website is online
www.freiblatt.com

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

Malte

crispy68 · Post by **crispy68** » Thu Mar 26, 2020 10:44 pm

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 · Post by **heynen** » Thu Mar 26, 2020 10:53 pm

That sounds good!
Here is the file:

https://drive.google.com/file/d/1heB-QU ... sp=sharing

crispy68 · Post by **crispy68** » Fri Mar 27, 2020 12:07 am

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 · Post by **heynen** » Fri Mar 27, 2020 12:28 am

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).

crispy68 · Post by **crispy68** » Fri Mar 27, 2020 12:54 am

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.

crispy68 · Post by **crispy68** » Fri Mar 27, 2020 1:09 am

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 · Post by **heynen** » Fri Mar 27, 2020 4:42 pm

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 · Post by **heynen** » Mon Mar 30, 2020 4:01 pm

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

www.wysiwygwebbuilder.com

Minimum height for Layout Grid?

Re: Minimum height for Layout Grid?

Re: Minimum height for Layout Grid?

Re: Minimum height for Layout Grid?

Re: Minimum height for Layout Grid?

Re: Minimum height for Layout Grid?

Re: Minimum height for Layout Grid?

Re: Minimum height for Layout Grid?

Re: Minimum height for Layout Grid?

Re: Minimum height for Layout Grid?