Jump to content

Custom CSS for Reordering Elements using Flex Order Properties Not Working for Mobile

Recommended Posts

Site URL: https://www.4240architecture.com/project-experience-by-typology-1

I'm trying to reorder div elements on the mobile version of the page using css flex and order properties. Please forgive my overkill/messy code. I'm having trouble 1. targeting ids 2. obviously making this function. Any help is appreciated. Thank you. 

@media only screen and (max-width: 540px) { html > body 
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .intrinsic img
  { display: flex !important; 
  flex-direction: column !important;
  }
}
@media only screen and (max-width: 540px) { html > body 
#navigator .page .row 
  { display: flex !important; 
    flex-direction: column !important;}
  }
  
@media only screen and (max-width: 540px) { html > body .sqs-block-image .image-block-outer-wrapper.image-block-v2 a.image-inset, .sqs-block-image .image-block-outer-wrapper.image-block-v2 a.image-title-wrapper  
   { display: flex !important; 
  flex-direction: column !important;
  }
}

@media only screen and (max-width: 540px) 

div#block-yui_3_17_2_1_1553018891518_15098
  {display: flex !important; 
  flex-direction: column !important;
    order: 1;}
div#block-yui_3_17_2_1_1553017357166_5571
  {display: flex !important; 
  flex-direction: column !important;
    order: 2;}
  div#block-yui_3_17_2_1_1553018891518_17028
  {display: flex !important; 
  flex-direction: column !important;
    order: 3;}
 div#block-yui_3_17_2_1_1553018891518_11185 
  {display: flex !important; 
  flex-direction: column !important;
    order: 4;}
div#block-yui_3_17_2_1_1553017357166_7475
  {display: flex !important; 
  flex-direction: column !important;
    order: 5;}
 div#block-yui_3_17_2_1_1553018891518_29032 
  {display: flex !important; 
  flex-direction: column !important;
    order: 6;}
 div#block-yui_3_17_2_1_1553018891518_6669 
  {display: flex !important; 
  flex-direction: column !important;
    order: 7;}
  div#block-yui_3_17_2_1_1592859351049_31227 {display: flex !important; 
  flex-direction: column !important;
    order: 8;}
 
 }

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

Top Posters In This Topic

Top Posters In This Topic

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.