Custom CSS Code to have two columns for blog posts on mobile

Site URL: https://www.ambiancecurator.com/interviews

Hello,

I would like to use a custom CSS code so that my "Interviews" tab and "Blog" tab show the different posts in two columns (side by side) on the mobile only. Does anyone know the custom css code for this?

24 minutes ago, ambiancecurator said:

Site URL: https://www.ambiancecurator.com/interviews

Hello,

I would like to use a custom CSS code so that my "Interviews" tab and "Blog" tab show the different posts in two columns (side by side) on the mobile only. Does anyone know the custom css code for this?

When I add the code below, it makes the images small enough for 2 columns, but the content is still stacked.

@media screen and (max-width:767px) {
section[data-section-id="603173cfacf1a904d0eb14fd"] {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,2fr));
}
div#page-5ecd994795a4d74aea940bfe>.row>.span-4 .image-block-wrapper {
    padding-bottom: 100% !important;
}
}

On 5/7/2021 at 8:53 PM, ambiancecurator said:

When I add the code below, it makes the images small enough for 2 columns, but the content is still stacked.

 

@media screen and (max-width:767px) {
section[data-section-id="603173cfacf1a904d0eb14fd"] {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,2fr));
}
div#page-5ecd994795a4d74aea940bfe>.row>.span-4 .image-block-wrapper {
    padding-bottom: 100% !important;
}
}

It looks like you sent me an email & I sent code.

This is code, if you haven't received email yet

/* Blog mobile 2 columns */
@media screen and (max-width:767px) {
.blog-basic-grid.collection-content-wrapper {
    grid-template-columns: repeat(2,1fr) !important;
    display: grid !important;
    grid-column-gap: 10px;
}
}

Also, do you want to fix these?

Site URL: https://www.ambiancecurator.com/

1. (Mobile-Popup) Center text?

2. (Tablet-About) Increase text width a bit?

Thank you! The code seems to have messed up the blog page now, how can I make it so that the blog page is also in the same format? Please see the link below:

https://www.ambiancecurator.com/blog

On 5/15/2021 at 12:31 AM, ambiancecurator said:

Thank you! The code seems to have messed up the blog page now, how can I make it so that the blog page is also in the same format? Please see the link below:

 

https://www.ambiancecurator.com/blog

Add new code

/* Blog mobile 2 columns */
@media screen and (max-width:767px) {
body#collection-603173cfacf1a904d0eb14f2 .blog-basic-grid.collection-content-wrapper {
    grid-template-columns: repeat(2,1fr) !important;
    display: grid !important;
    grid-column-gap: 10px;
}
}

thank you! is there a way to make both the interviews and blogs 2 columns?

16 hours ago, ambiancecurator said:

thank you! is there a way to make both the interviews and blogs 2 columns?

Add to Interviews & Blog Page Header

<style>
  /* Blog mobile 2 columns */
@media screen and (max-width:767px) {
.blog-basic-grid.collection-content-wrapper {
    grid-template-columns: repeat(2,1fr) !important;
    display: grid !important;
    grid-column-gap: 10px;
}
}
</style>