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.