Page 1 of 1
Section of page has no grid, can't add one?
Posted: Thu Mar 21, 2024 8:09 pm
by Fredl
I started a project using the "Cocktails" template. I removed some grids that I didn't need for my layout which seems to have left a "hole" of a kind that has the page background color but isn't part of any grid. The section I'm describing is directly below the 3 cards. When I try to add a grid there it gets forced below the seemingly gridless area and I can't get the grid to begin directly below the cards. When I add the grid it appears on the bottom of the page, I use "move up" but it will not occupy the area I'm trying to fix. What is causing this section to resist adding a grid that is directly below the 3 cards?
Project files:
https://drive.google.com/drive/folders/ ... drive_link
(Also another odd issue is that I want to move the card that is in front of the sea turtle to the bottom of the welcome layout grid so that it isn't directly over the turtle, but if I use margin 400 (for example) it scales the background in editor, so that it looks like I zoomed in instead of simply moving the card down. The same thing happens if I place a 300x300 transparent .png image above the card to push it down, the background image scales up for some reason that I can't figure out. How can I adjust the position of the card without causing other issues?)
Re: Section of page has no grid, can't add one?
Posted: Thu Mar 21, 2024 8:27 pm
by Pablo
I cannot access your project: Access denied.
But maybe you the 'hole' is caused by the margin?
You can change the margin via the 'Margin' properties.
Re: Section of page has no grid, can't add one?
Posted: Thu Mar 21, 2024 8:34 pm
by Fredl
Hmm, I chose "anybody with the link" but I'll try it again. Thanks Pablo. The problem with margin is from where? There is no bottom margin set on the 3 card grid. Please try the link again, I just confirmed "anybody with the link"
Re: Section of page has no grid, can't add one?
Posted: Fri Mar 22, 2024 7:11 am
by Pablo
If you are referring to the space below 'aboutLayoutGrid2' then this is caused by the bottom margin which is set to 100.
Also, there is an empty grid 'LayoutGrid2'
I want to move the card that is in front of the sea turtle to the bottom of the welcome layout grid so that it isn't directly over the turtle, but if I use margin 400 (for example)
It is not clear which 'card' you are referring, but in layout grids most objects are automatically scaled to full width (unless the full width option is off)
You can limit the width by setting a maximum width or reduced the width of the grid column.
If you need further assistance, then please try to be more specific. For example, include the ID of each object you are referring to.
Re: Section of page has no grid, can't add one?
Posted: Fri Mar 22, 2024 2:41 pm
by Fredl
Thanks Pablo, I looked and looked for that margin but somehow missed it. The card I mentioned is "welcome card 1" that sits in "welcome layout grid"
I managed to place the card lower so that it didn't obscure the turtle's head with a 300x300 transparent .png. When I shrink the viewport the "welcome card 1" breaks the layout and covers "about layout grid 1" Is there a way to have it push "about layout grid 1" down in smaller viewports or do I need to add a breakpoint? Also why are the 3 cards in "about layout grid 2" not the same size in preview when they are in the editor? When I preview "about card 1" is shorter than "About card 2" and 3, I need them to be aligned, not staggered along the bottom edge. Thanks again!
Re: Section of page has no grid, can't add one?
Posted: Fri Mar 22, 2024 3:21 pm
by Pablo
In case of 'welcome card 1', the spacing is defined by the padding of the layout grid welcomeLayoutGrid
Also, because this layout grid is set to "100vh" it will always be sized to 100% of the the viewport height.
If you want to have different padding for smaller screens then you will have to add a breakpoint.
The first card has less text the card, so in the browser it will make be smaller.
If you want the cards to have the same size then either use a card container or set a minimum height for the text. For example: 175
Tip: if you need help then please remove everything from the project that is not relevant to your question. This will prevent confusion and will save us both a lot of time.
For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134