Jump to content

How to switch mobile block order on blog posts

Recommended Posts

Site URL: https://helloluci.com/helloluciblog/self-care-during-quarantine

Hi All!

I'm working on some blog post that interview people, and I current have the desktop view set up as 'image right, text left' then 'text right, image left' on the next line, and so on. In mobile view, I'd like for the images to stack on top of the quotes. I have tried the following CSS which was given to me by a more advanced user, but it didn't work. I'm not really sure where to go from there.

I've linked the blog post for reference!

@media screen and (max-width: 640px) {
.Main-content .code-block + .sqs-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  }
}

 

Thank you!

Link to comment
  • Replies 1
  • Views 348
  • Created
  • Last Reply

I don't think you can do it with just CSS, will need to use both CSS and jQuery because the column divs have no class or fixed ID's. What you did above would flip all of them (even the ones that were originally oriented correctly).

@media screen and (max-width: 640px) {
  .Main-content .row.sqs-row {
      display: flex;
      flex-direction: column;
  }
}
$('div.image-block').parent().attr('style','order:-1');
Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.