Display blog two columns side by side on mobile device

Hello,

On my website I have a few blogs going, but I need to be able to have only one of them to display its two columns side by side, not stacked, when viewed on a mobile device.

All my blogs are connected to their own summary block.

I’m hoped there is a way to do this.

I am a newbie when it comes to these things. CSS code to cut and paste is fine.

Website:

ofwhitewalls.com

Here is a link to one of the pages in the blog I want to do this to.

https://www.ofwhitewalls.com/sequoia-blog/Blog Post Title One-brdjw

I am using 7.1.

Thanks for any help.

try this link.

https://www.ofwhitewalls.com/sequoia-blog/Blog Post Title One-brdjw

On 4/8/2023 at 9:20 AM, thewriterb said:

try this link.

https://www.ofwhitewalls.com/sequoia-blog/Blog Post Title One-brdjw

Try adding to Design > Custom CSS

/* Mobile Side by Side */
@media screen and (max-width:767px) {
div#item-6429f164bb2d9c025d1b147d .span-6 {
    width: 50% !important;
    float: left !important;
}
}

Thank you. I must not have been totally clear. That code worked great for the blog page of the URL I posted. What I need is to have that happen to each of the pages in that blog. Currently there are 2 pages, but I plan on added more.

Is this possible without having CSS code for each blog page?

Thanks for you help.

i’m not sure if this helps, but here is the link to the blog, not just a page.

https://www.ofwhitewalls.com/sequoia-blog

On 4/13/2023 at 6:04 AM, thewriterb said:

i’m not sure if this helps, but here is the link to the blog, not just a page.

https://www.ofwhitewalls.com/sequoia-blog

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.tweak-blog-basic-grid-width-full .blog-basic-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px;
}
}

Strange, I cut and pasted that code in and nothing changed. I did that by leaving in the first code suggested and only by itself.

also, if this code had worked, would it have only affected that blog? That is what i’m waiting to have happen.

thank you for time and effort you have been putting in for me.

I'm sorry, but I do not know how to write CSS code. My blog is a basic grid system.

If you look at the first response were Tuanphan give me CSS code, that did exactly what I wanted, but only for the one page I sent them a URL link for. I sent the link not wanting for that single page, but as a link to a page in the Blog I want to do this to.

I would like to be able to have all the page in this one blog display this way. I only want this for this one blog, and not effecting my other blogs.

This first CSS code must be page specific. I was hoping this could be done to this blog without having to do a CSS code for each page.

Thank you for your help.

You mean you want that code, run on this page only?

https://www.ofwhitewalls.com/sequoia-blog