Topic: Blog Columns based on screen size

chetanpatil
August 1, 2024 at 4:40 am

Hi,

In my website I want to increase number of columns for the devices which are larger than 1440px.
Settings:
https://i.postimg.cc/HLg0k5bP/Screenshot-2024-08-01-at-6-05-34-PM.png
https://startupwebsite.net/wari/?hkdev_temp_access_key=BlQLw867siRzybfXWlWE this gives access to site and you have visit the blog page from there.

Current settings are getting applied to all devices but I want more granular control.

We can overwrite using css but if some settings are changed from customize like instead of 3 if made 2 then dynamically applied class will get changed and our changes will not work.

What is the best workaround for this?

Regards

David

August 1, 2024 at 6:41 am

Hi there,

if you want granular control then using some CSS would be best:


/* default 2 columns in mobile */
#main .generate-columns-container {
    --blog-column: 2;
    display: grid;
    grid-template-columns: repeat(var(--blog-column), 1fr);
    column-gap: 10px;
}
#main .generate-columns-container > * {
    width: 100%;
}
#main .generate-columns-container > *:is(.gb-container, nav) {
    grid-column: 1/-1;
}
/* set tablet columns */
@media(min-width: 769px) {
    #main .generate-columns-container {
        --blog-column: 3;
    }
}
/* set desktop columns */
@media(min-width: 1024px) {
    #main .generate-columns-container {
        --blog-column: 4;
    }
}

In the CSS there are 3 instances of: --blog-column: 2; each one setting the number of columns for the size of device that is commented.

chetanpatil
August 1, 2024 at 6:42 am

Hi David,

Thank you for your quick response.

Best
David
August 2, 2024 at 1:42 am

You’re welcome

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Blog Columns based on screen size