2 Column Mobile View

On 10/25/2021 at 3:19 PM, Ciodensky said:

Yes. I was able to inject the code below but here's the result looks weird.

The shopify below went too low. And, I would like to make the 2 column logos centered horizontally.

Appreciate your help very much.

Can you check password? It is incorrect

my web: https://www.xystema.com

password: 0612

On 10/31/2021 at 10:15 PM, tuanphan said:

Can you check password? It is incorrect

my web: https://www.xystema.com

password: 0612

sorry i checked it and it is 061298

On 10/31/2021 at 10:15 PM, tuanphan said:

Can you check password? It is incorrect

my web: https://www.xystema.com

password: 0612

Sorry, but I checked and the new password is 061298

On 11/2/2021 at 6:23 AM, Ciodensky said:

Sorry, but I checked and the new password is 061298

Do you still need help?

6 minutes ago, tuanphan said:

Do you still need help?

No need, you already solved this in email. Thanks by the way.

Hello there, could you please teach me how to display two column on mobile?

Here is the link

https://www.no-boundaries.co.uk/memberships

As you see, the icon and description becomes up and down but it's side to side on the PC.

Hi @tuanphan,
What about a 2 column view on mobile and 3 column view on tablet (when your original design is 4 columns)?
I've tried the following code, but only get the first half right:

@media screen and (max-width:767px) {
div#page-section-??? .span-12 {
.span-3 {
    width: 50% !important;
    float: left !important;
  margin-bottom: 0 !important;
}
.span-3:nth-child(2n+1) {
    clear: left !important;
}}}

@media screen and (max-width:1200px) {
div#page-section-??? .span-12
.span-4 {
    width: 33.333% !important;
    float: left !important;
}
  .span-4:nth-child(2n+1) {
    clear: left !important;
}}

3 hours ago, song said:

Hello there, could you please teach me how to display two column on mobile?

Here is the link

https://www.no-boundaries.co.uk/memberships

As you see, the icon and description becomes up and down but it's side to side on the PC.

 

 

 

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="61beb761ad8d292abaec3142"] .sqs-layout  .span-4 {
    width: 50% !important;
    float: left !important;
  }
}

Let me know how it works on your site

1 hour ago, nicolusse88 said:

Hi @tuanphan,
What about a 2 column view on mobile and 3 column view on tablet (when your original design is 4 columns)?
I've tried the following code, but only get the first half right:

@media screen and (max-width:767px) {
div#page-section-??? .span-12 {
.span-3 {
    width: 50% !important;
    float: left !important;
  margin-bottom: 0 !important;
}
.span-3:nth-child(2n+1) {
    clear: left !important;
}}}

@media screen and (max-width:1200px) {
div#page-section-??? .span-12
.span-4 {
    width: 33.333% !important;
    float: left !important;
}
  .span-4:nth-child(2n+1) {
    clear: left !important;
}}

 

Can you share the link that directs to that page? So we can take a look

@bangank36, here is the link: maisonmariet.fr/shop-articles-en-cuir-1.

Never mind what I said about the 4 column design, it's actually not a smart solution. Although, now I'm experiencing issue with the tablet and mobile view because I can't get the 2 column design to work properly with the following code:

@media screen and (max-width:960px) {
div#page-section-??? .span-12 {
.span-4 {
    width: 50% !important;
    float: left !important;
}
.span-3:nth-child(2n+1) {
    clear: left !important;
}}}

@nicolusse88 Try remove this code

@media screen and (max-width: 960px) {
    div#page-section-61c1e1fd0b468b2ee43fa6e5 .span-12 .span-4 {
        width:50% !important;
        float: left !important
    }

    div#page-section-61c1e1fd0b468b2ee43fa6e5 .span-12 .span-3:nth-child(2n+1) {
        clear: left !important
    }
}

and use this new code

/* Mobile 2 items */
@media screen and (max-width:767px) {
div#page-section-61c1e1fd0b468b2ee43fa6e5 .span-12>.row:nth-child(-n+2) {
    width: 50% !important;
    float: left !important;
}
div#page-section-61c1e1fd0b468b2ee43fa6e5 .span-12>.row:nth-child(3) .span-4 {
    width: 50% !important;
    float: left !important;
}
}
/* tablet 3 items */
@media screen and (max-width:1024px) and (min-width:768px) {
div#page-section-61c1e1fd0b468b2ee43fa6e5 .span-12 .span-4 {
        width:33.33% !important;
        float: left !important;
    }
}

Hey @tuanphan

Any chance you could give me a hand getting the text blocks in the black  section to sit 2 column on mobile.
I've tried your solution for others and I can't get it to work.

https://guppy-lobster-z4aa.squarespace.com/

pw: squarespace

5 hours ago, becmorris said:

Hey @tuanphan

Any chance you could give me a hand getting the text blocks in the black  section to sit 2 column on mobile.
I've tried your solution for others and I can't get it to work.

https://guppy-lobster-z4aa.squarespace.com/

pw: squarespace

Try this CSS. Also your site has a huge white space on right of screen (mobile)

@media screen and (max-width:767px) {
div#page-section-62c24c7f64c52c697ebd80c6 .span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

17 hours ago, tuanphan said:

Try this CSS. Also your site has a huge white space on right of screen (mobile)

@media screen and (max-width:767px) {
div#page-section-62c24c7f64c52c697ebd80c6 .span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

 

thanks,
That has worked for the first 4. But the bottom 4 are sitting in a different row and are still in a single coloum stack. Still can't get the code to behave.

I've fixed the white space - thanks.
 

new url is melaleuca.squarespace.com

pw: squarespace

2 hours ago, becmorris said:

thanks,
That has worked for the first 4. But the bottom 4 are sitting in a different row and are still in a single coloum stack. Still can't get the code to behave.

I've fixed the white space - thanks.
 

new url is melaleuca.squarespace.com

pw: squarespace

 

Try this new code

@media screen and (max-width:767px) {
div#page-section-62c24c7f64c52c697ebd80c6 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-62c24c7f64c52c697ebd80c6 .span-3:nth-child(2n+1) {
    clear: left;
}
}

4 hours ago, tuanphan said:

Try this new code

@media screen and (max-width:767px) {
div#page-section-62c24c7f64c52c697ebd80c6 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-62c24c7f64c52c697ebd80c6 .span-3:nth-child(2n+1) {
    clear: left;
}
}

 

Amazing!

thankyou.

Hi @tuanphan, I tried the codes above and this has worked on one of my pages and the other it brings the second column down the page. How can I fix this? Ideally I'd like the images to be aligned with each other. And any chance you know how to align the top of images on tablet so it doesn't look jagged?

www.karitonsorbetes.com

pw: chinatown

1 hour ago, Theresamo said:

Hi @tuanphan, I tried the codes above and this has worked on one of my pages and the other it brings the second column down the page. How can I fix this? Ideally I'd like the images to be aligned with each other. And any chance you know how to align the top of images on tablet so it doesn't look jagged?

www.karitonsorbetes.com

pw: chinatown

Which page are you referring to?

Hi @tuanphan I am referring to all the flavours pages, Gelato, Sorbet etc.

On 8/5/2022 at 4:14 PM, Theresamo said:

Hi @tuanphan I am referring to all the flavours pages, Gelato, Sorbet etc.

To make them align, you need to adjust recreate layout

for example this page https://www.karitonsorbetes.com/gelato

First, add image block 1, 2, 3, 4

Next, add 1 Line Block

Next, add image 5,6,7,8

Next, add 1 Line Block

...

Final remove all Line Blocks

Hey @tuanphan thankyou so much, that worked! The CSS code for two columns on mobile isn't working for me, it works on some and then it becomes one column. Any ideas on how this can be fixed?

On 8/8/2022 at 4:00 PM, Theresamo said:

Hey @tuanphan thankyou so much, that worked! The CSS code for two columns on mobile isn't working for me, it works on some and then it becomes one column. Any ideas on how this can be fixed?

Which CSS did you use?

Hey @tuanphan
 

I want to make a 2 collums view for my 'Project' page - only for the mobile view. I've tried the different codes above but nothing seems to work out for me, can you please help me out?

16 hours ago, EdwinLindberg said:

Hey @tuanphan
 

I want to make a 2 collums view for my 'Project' page - only for the mobile view. I've tried the different codes above but nothing seems to work out for me, can you please help me out?

Can you share link to Project page?

2 hours ago, tuanphan said:

Can you share link to Project page?

https://www.connectedartists.com/ the home page