Now, the website is online
www.freiblatt.com
Maybe you can check how to solve the "minimum height" problem?
Thank you!
Malte
Minimum height for Layout Grid?
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
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
Re: Minimum height for Layout Grid?
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.
Re: Minimum height for Layout Grid?
So this is what you are after correct?
https://www.wizbangwebdesign.com/demo/news/
There are some other issues you also need to address.
https://www.wizbangwebdesign.com/demo/news/
There are some other issues you also need to address.
Re: Minimum height for Layout Grid?
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).
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).
Re: Minimum height for Layout Grid?
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:
you can write it like this instead:
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:
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.
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>
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>
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.
Re: Minimum height for Layout Grid?
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.
Re: Minimum height for Layout Grid?
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
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
Re: Minimum height for Layout Grid?
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
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