Is it possible?

User 2601283 Photo


Registered User
217 posts

Working on a redesign of our site and trying to do things with grid as much as possible.

Using the Cards section from the kit-kat theme, is it possible to include addition information between the cards and the footer without the large amount of space appearing?

Attachments:
User 122279 Photo


Senior Advisor
13,004 posts

Please post your project file, so that we can see how you have made that page. We need to see how that empty space is made to be able to tell you how to fill it.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2601283 Photo


Registered User
217 posts

sorry, grabbed wrong file
Attachments:
User 122279 Photo


Senior Advisor
13,004 posts

I'm not very much into grid, but the culprit here is clearly the grid parent. You need to set some height limitation, otherwise it will stretch and stretch ad infinitum more or less. I tried the height 100vh which brought the footer up quite close to those two headings with links below them. You may not agree with that, especially if you want to add more contents, so you need to play with the height and see what is best.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 379556 Photo


Registered User
1,028 posts

On the main container (class grid-parent), the Grid Editor shows 5 rows. Rows 3 and 4 are set to 1fr. If at 'No Breakpoint - All Widths' one sets Rows 3 and 4 to 'auto', the gap disappears.

Frank
User 122279 Photo


Senior Advisor
13,004 posts

Oh, so that is the way to solve it in grid. I didn't know, I said I'm not much into it yet. I'll get there some day... ;)
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 379556 Photo


Registered User
1,028 posts

I fear I'm also by no means there, and not getting much practice at it either for the following reason. The Fallback First style etc. settings precede the Grid Layout settings in the main.css file, and browsers which don't read CSS Grid Layout settings need to be catered for.

I very quickly discovered (happily offline) that for me it was therefore important first to cater for Fallback First. Doing it the other way (CSS Grid Layout first) resulted in doing all sorts of styling within Grid Layout, and later having to repeat much of it in Fallback First because the non-Grid-Layout browsers of course ignore the stylings done within Grid Layout.

Stylings done in Fallback First are read by the browsers which do take note of Grid Layout, and one doesn't have to repeat those set for Fallback First. For Grid Layout one therefore needs to include only the stylings one wishes to change for Grid-Layout browsers.

Frank
User 2699991 Photo


Registered User
2,851 posts
Online Now

Frank Cook wrote:
I fear I'm also by no means there, and not getting much practice at it either for the following reason. The Fallback First style etc. settings precede the Grid Layout settings in the main.css file, and browsers which don't read CSS Grid Layout settings need to be catered for.

I very quickly discovered (happily offline) that for me it was therefore important first to cater for Fallback First. Doing it the other way (CSS Grid Layout first) resulted in doing all sorts of styling within Grid Layout, and later having to repeat much of it in Fallback First because the non-Grid-Layout browsers of course ignore the stylings done within Grid Layout.

Stylings done in Fallback First are read by the browsers which do take note of Grid Layout, and one doesn't have to repeat those set for Fallback First. For Grid Layout one therefore needs to include only the stylings one wishes to change for Grid-Layout browsers.

Frank

Isn't that's why it's called fallback first? :)
The Help You Need: When You Need It The Most
User 379556 Photo


Registered User
1,028 posts

That would make sense, but one might not reach that conclusion from some of the guidance given.

(a) This part of the Guide says, "Simply select the Fallback First mode to set your basic styles. Then switch to the other mode and design away for modern browsers. And...it will also work the other way around — create an awesome Grid Layout first, then define styles for non-supporting browsers." That last sentence implies it doesn't matter in which order one does it, not mentioning the problem created by the second method.

(b) Bob's tutorial here at item 1 under the heading 'Convert to CSS Grid—section by section' says, "Start with removing all the layout related classes in your HTML. New classes can be assigned if needed." It's possible that many, like me, would have layout and styling mixed together in a class. and I think in those circumstances it's best to use the Apply Styles > Reset facility to remove just any layout matters from such classes.

There is nothing incorrect in the above guidance, but neither is there anything there making clear the problems of not starting with Fallback First. Unless I've misunderstood the situaton, I think it would be useful for the Guide and other instructions to urge users that, if they're going to use Fallback First at all, they should use it first. Happily Bob does advise something like that workflow here, but doesn't seem there to consider that workflow for layout on wider screens in non-CSS-Grid browsers.

I think the background problem is one that occurs because guidance can sometimes overlook how ignorant I, the reader, am.

Frank
User 122279 Photo


Senior Advisor
13,004 posts

Please let Bob read this. You have to approach him directly, then he doesn't come over here too often.
You are definitely not the only ignorant reader here (raising a hand).
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.