block grid how to make it mobile friendly

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Nez 8 posts 38 karma points

Jun 16, 2023 @ 20:18

0

Block Grid. How to make it mobile friendly?

Hi,

when using block grid. How can I make it mobile friendly? Once you are on mobile view, the spacing looks weird with white spaces everywhere.

There's not really a tutorial for it either.

Is the only way to do this is using @media and change umb-block-grid__layout-item directly?

Thank you.

Copy Link

Robert Johnston 16 posts 106 karma points

Jun 16, 2023 @ 22:06

I'm sure there are better ways to do this but here is the css I use:

.umb-block-grid__layout-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
    grid-gap: 0px;
    grid-auto-flow: row;
    grid-auto-rows: minmax(50px, -webkit-min-content);
    grid-auto-rows: minmax(50px, min-content);
}

.umb-block-grid__layout-item {
    position: relative;
    /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
    grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
    grid-row: span var(--umb-block-grid--item-row-span, 1);
}

.umb-block-grid__layout-item[data-force-left] {
    grid-column-start: 1;
}

.umb-block-grid__layout-item[data-force-right] {
    grid-column-start: calc(1 + var(--umb-block-grid--grid-columns) - var(--umb-block-grid--item-column-span));
}

.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
    grid-gap: 0px;
    grid-auto-flow: row;
    grid-auto-rows: minmax(50px, -webkit-min-content);
    grid-auto-rows: minmax(50px, min-content);
    width: 100%;
}

.umb-block-grid__area {
    position: relative;
    /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
    grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
    grid-row: span var(--umb-block-grid--area-row-span, 1);
}

@media (min-width:1024px) {
    .umb-block-grid__layout-item {
        grid-column-end: span var(--umb-block-grid--item-column-span, 1);
    }
    .umb-block-grid__area {
        grid-column-end: span var(--umb-block-grid--area-column-span, 1);
    }
}

@media (max-width:600px) {
    .umb-block-grid__area-container {
        --umb-block-grid--area-grid-columns: 1!important;
    }
}

I have this in a separate css (blockgridlayout.css) file I reference in my master template.

Copy Link

Nez 8 posts 38 karma points

Jun 20, 2023 @ 16:03

0

I see, thank you! I will def try it out :D

Copy Link
is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies

Flag this post as spam?

Block Grid. How to make it mobile friendly?