Jump to content

Display blog two columns side by side on mobile device

Go to solution Solved by tuanphan,

Recommended Posts

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.

Link to comment
  • Replies 9
  • Views 825
  • Created
  • Last Reply

Top Posters In This Topic

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

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment
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;
}
}

image.png.12151f034d32a9904d78472ccb223c03.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment

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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.