Adjust images in mobile view- Two Columns?

Site URL: https://www.treeartstudio.com/welcome

Hey! Im trying to get separate images on my site to appear side by side (two colum) on mobile view.  I have tried several codes that were suggested on the forum but nothing seems to work.. 
There are 3 sections on my main page i need to get on two columns (images below)

Please can anyone help me out?

Thanks in advanced

🙂

Add to Home > Design > Custom CSS

/* 2 columns mobile */
@media screen and (max-width:767px) {
/* studio classes */
div#page-section-5eeb8600e60f743cedcd6f5b .span-8>.row>.col {
    width: 50% !important;
    float: left !important;
}
/* get artsy */
div#page-section-5ee0fbc857f9d5775fa42371 .span-12>.row {
  .col:nth-child(2), .col:nth-child(3) {
      width: 50% !important;
      float: left !important;
  }
}
div#page-section-5ee0fbc857f9d5775fa42371 .span-12>.row>.col:last-child>div {
    width: 40%;
    float: left !important;
    clear: none;
}
}

It worked so nicely, thank you @tuanphan

The only section that is not doing it is the Private Classes, i tried to use the code you used for -studio classes- and replace the page section ID but nothing... Can you also help me with this section?

Im also getting this small alignment error in the last two columns, is there any way to fix it?

On 7/6/2020 at 1:27 PM, sashaadato said:

It worked so nicely, thank you @tuanphan

The only section that is not doing it is the Private Classes, i tried to use the code you used for -studio classes- and replace the page section ID but nothing... Can you also help me with this section?

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5efcc1eb502fee6d856f49a2>.row>.col:not(:first-child) {
    width: 50% !important;
    float: left !important;
}
}

@tuanphan I'm facing a similar problem! I've a page where I created a logo wall using single images organized in three columns (see image below).

I used the code you posted in another page (pw: test123) to allow for a two-column view in mobile, and it works great, except that the order of the logos is off... I want it to go row by row, that is first the first logo in the first column, then the first logo in the second column, then the first logo in the third column, then the second logo in the first column, etc.... 

1    2    3
4   5    6
7   8    9

And i neeed it to be
1   2
3  4
5  6
7  8
9

The code I used is the following:

 

/* 2 columns logos How to Listen*/
    @media screen and (max-width:767px) {
    div#block-yui_3_17_2_1_1620851946936_20487+.row>.col {
        float: left !important;
        width: 50% !important;
    }
    div#block-yui_3_17_2_1_1620851946936_20487+.row>.col:nth-child(2n+1) {
        clear: left;
    }
    }


/* 2 columns logos Sponsors and Partners*/
    @media screen and (max-width:767px) {
    div#block-yui_3_17_2_1_1620851486472_43420+.row>.col> {
        float: left !important;
        width: 50% !important;
    }
    div#block-yui_3_17_2_1_1620851486472_43420+.row>.col:nth-child(2n+1) {
        clear: left;
    }
    }

/* 2 columns logos Nonprofit Partners and Resources*/
    @media screen and (max-width:767px) {
    div#block-yui_3_17_2_1_1620529247377_87964+.row>.col {
        float: left !important;
        width: 50% !important;
    }
    div#block-yui_3_17_2_1_1620529247377_87964+.row>.col:nth-child(2n+1) {
        clear: left;
    }
    }

You'll see that I want to replicate this two-column layout both on the "How to listen" section above, and the "Nonprofit Partners and Resources" below

On 5/13/2021 at 5:58 AM, brunoaa1991 said:

@tuanphan I'm facing a similar problem! I've a page where I created a logo wall using single images organized in three columns (see image below).

I used the code you posted in another page (pw: test123) to allow for a two-column view in mobile, and it works great, except that the order of the logos is off... I want it to go row by row, that is first the first logo in the first column, then the first logo in the second column, then the first logo in the third column, then the second logo in the first column, etc.... 

1    2    3
4   5    6
7   8    9

And i neeed it to be
1   2
3  4
5  6
7  8
9

The code I used is the following:

 

/* 2 columns logos How to Listen*/
    @media screen and (max-width:767px) {
    div#block-yui_3_17_2_1_1620851946936_20487+.row>.col {
        float: left !important;
        width: 50% !important;
    }
    div#block-yui_3_17_2_1_1620851946936_20487+.row>.col:nth-child(2n+1) {
        clear: left;
    }
    }


/* 2 columns logos Sponsors and Partners*/
    @media screen and (max-width:767px) {
    div#block-yui_3_17_2_1_1620851486472_43420+.row>.col> {
        float: left !important;
        width: 50% !important;
    }
    div#block-yui_3_17_2_1_1620851486472_43420+.row>.col:nth-child(2n+1) {
        clear: left;
    }
    }

/* 2 columns logos Nonprofit Partners and Resources*/
    @media screen and (max-width:767px) {
    div#block-yui_3_17_2_1_1620529247377_87964+.row>.col {
        float: left !important;
        width: 50% !important;
    }
    div#block-yui_3_17_2_1_1620529247377_87964+.row>.col:nth-child(2n+1) {
        clear: left;
    }
    }

You'll see that I want to replicate this two-column layout both on the "How to listen" section above, and the "Nonprofit Partners and Resources" below

Hi. Do/will you use Personal or Business Plan?

Business! Why?

On 5/15/2021 at 1:19 AM, brunoaa1991 said:

Business! Why?

This need to JavaScript (Business plan & Commerce plan support JS) The site url doesn't exist.

Hi @tuanphan me too... and I am adding css code in the page but in the other section as I am not on business plan. 

end of this page https://www.nobuki.fr/home  I need to add 4images like icons 
and on the Mobile as well want to make it 2columns or 4 columns , but I can't make it... 




I felt so dumb for I can't make this simple thing! 

 Thank you for the advance! x

23 hours ago, plantsplants said:

Hi @tuanphan me too... and I am adding css code in the page but in the other section as I am not on business plan. 

end of this page https://www.nobuki.fr/home  I need to add 4images like icons 
and on the Mobile as well want to make it 2columns or 4 columns , but I can't make it... 




I felt so dumb for I can't make this simple thing! 

 Thank you for the advance! x

 

Add to Design > Custom CSS

/* Mobile logos 2 columns */
@media screen and (max-width:767px) {
div#block-b71d77a8469096da7892+.row .span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-b71d77a8469096da7892+.row .span-2:nth-child(2n+1) {
    clear: left !important;
}
}

Thank you @tuanphan  !! 🙂

On 6/2/2021 at 6:03 PM, plantsplants said:

Thank you @tuanphan  !! 🙂

(Tablet-Header) Do you want to Add a phone next to burger?

hi @tuanphan, I'm having a similar issue, the images in my portfolio section of my website are only showing in 1 column but I want there to be 2, I've added a photo to show you what it currently looks like

website: bethsquire.com

password: Password8

22 hours ago, bea1570048477 said:

hi @tuanphan, I'm having a similar issue, the images in my portfolio section of my website are only showing in 1 column but I want there to be 2, I've added a photo to show you what it currently looks like

website: bethsquire.com

password: Password8

Just sent the code, not sure in which topic.

**** I found something that works :

https://www.rebeccagracedesigns.com/blog/products-side-by-side-mobile

/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}

Hi Tuanphan,

I seem to have the same issue. I tried to put codes you provided for the others on the Design/CSS custom section, but it doesn't work. I have the buisness plan and I which to have 2 column instead of one.

https://www.gabrielleboucherart.com/originals

thank you!

On 8/7/2021 at 12:46 AM, Gabrielleboucherart said:

**** I found something that works :

https://www.rebeccagracedesigns.com/blog/products-side-by-side-mobile

 

/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}

 

 

Hi Tuanphan,

I seem to have the same issue. I tried to put codes you provided for the others on the Design/CSS custom section, but it doesn't work. I have the buisness plan and I which to have 2 column instead of one.

https://www.gabrielleboucherart.com/originals

thank you!

 

 

Hi. It looks like you solved it? I see 2 columns here

Hi @tuanphan, it's awesome how you're generously helping so many people here. I'm looking to get the social icons on this page to appear in 3 columns, rather than stacked into one. Would love your help!

https://www.goodwork.house/mhs 

On 8/12/2021 at 3:32 AM, goodworkjesse said:

Hi @tuanphan, it's awesome how you're generously helping so many people here. I'm looking to get the social icons on this page to appear in 3 columns, rather than stacked into one. Would love your help!

https://www.goodwork.house/mhs 

 

Hi, Add to Design > Custom CSS

/* Mobile social 3 columns */
@media screen and (max-width:767px) {
/* person 1 */
div#block-yui_3_17_2_1_1628634464170_28246+.row .span-2 {
    width: 33.3333% !important;
    float: left !important;
}
/* person 2 */
div#block-5bc3e8e5bd1f2b5f184c+.row>.col {
    width: 33.3333% !important;
    float: left !important;
}
/* zack */
div#block-0a019bd4c9e76b89280f+.row .span-3 {
    width: 33.3333% !important;
    float: left !important;
}
/* donovan */
div#block-0d264232a822327ed615+.row .span-3 {
    width: 33.3333% !important;
    float: left !important;
}
/* brandon */
div#block-8cdef54145b5c3562953+.row .span-3 {
    width: 33.3333% !important;
    float: left !important;
}
/* other */
.video-block+.row>.col {
    width: 33.3333% !important;
    float: left !important;
}
}

Hi @tuanphan

I'm having a similar issue. I'm using customised images of icons and want them in two columns for mobile view. I can't seem to make any of the above code work. Any help would be most appreciated.

Desktop view is perfect

On 12/16/2021 at 12:22 AM, BarryH said:

Hi @tuanphan

I'm having a similar issue. I'm using customised images of icons and want them in two columns for mobile view. I can't seem to make any of the above code work. Any help would be most appreciated.

Desktop view is perfect

 

Hi. What is site url?