Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adjust images in mobile view- Two Columns?


sashaadato

Question

18 answers to this question

Recommended Posts

  • 0

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;
}
}

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@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

Logos desktop.png

Logos mobile.png

Link to comment
  • 0
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

Logos desktop.png

Logos mobile.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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... 

1663573976_2021-05-3117_16_16.thumb.png.e4335942d0685f3c362483320a15929e.png


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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

Screenshot 2021-07-28 at 20.18.49.png

Just sent the code, not sure in which topic.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

**** 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!

 

 

image.png.fab39e31f4ece263f4b3a7fdd9ef1d33.png

Edited by Gabrielleboucherart
Link to comment
  • 0
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!

 

 

image.png.fab39e31f4ece263f4b3a7fdd9ef1d33.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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 

 

Image 2021-08-11 at 1.29.22 PM.jpg

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...