Simona Zukauskaite Simona Zukauskaite - 1 month ago 7
CSS Question

Swap text block order for mobile view on Squarespace

I've already asked this on Squarespace but have received ZERO help and I'm getting desperate (sad face). So I'm hoping people here might be a little more friendly :D

I'm wondering if anyone would be kind enough (pretty please) to write a code for me similar to the code Aarnaa got in the link here. I have no experience in code and have been trying my best to mash something together for almost a week now, but unfortunately have been unsuccessful!

I am creating a website for an Omani Women's charity and part of the website needs to be in Arabic and Arabic reads Right-To-Left. The problem I'm experiencing is that text blocks also have to read Right-To-Left. This looks fine on desktop, but when I view the page (link below) on mobile, it stacks it up and orders it in a way that doesn't make sense anymore (2,1,4,3,6,5).

https://sim-zuk-7r39.squarespace.com/our-objectives-a/

To solve the problem the blocks on mobile need to read Right-To-Left so that block 1 would come before block 2 (even though block 1 is on the right hand side of the page on the desktop version). Hope this makes sense?

If anyone could help me I'd be eternally grateful!

Thank you sooooo much in advance,
Sim

Answer Source

add this class to your css...

[class*=sqs-col] {
    float: right !important;
}

and in the html change the order like this

<div class="col sqs-col-4 span-4">...... 2.....</div>
<div class="col sqs-col-4 span-4">...... 1.....</div>

to

<div class="col sqs-col-4 span-4">...... 1.....</div>
<div class="col sqs-col-4 span-4">...... 2.....</div>

if you only have access to the css you can try flexbox with media query

@media  (max-width: 600px) {
    div#yui_3_17_2_1_1497969035108_70 .sqs-row{
      display: flex !important;
      flex-direction: column-reverse !important;
    }

}

adding this to your css file