Apply 2 columns in mobile to specific summary

Site URL: https://www.bbarinaga.com/portadasebooks

https://www.bbarinaga.com/portadasebooks

password: 1234

Hello, I am on 7.0 and am attempting to simply make one individual summary list switch to 2 columns on mobile. 

I have used the following code but the change is applied to all summaries and I only need it for this one: https://www.bbarinaga.com/portadasebooks

@media screen and (max-width:640px) {

.sqs-block-summary-v2 .summary-item.positioned {

    width: 50% !important;

    position: static;

}

.sqs-block-summary-v2 .summary-item-list {

    display: flex;

    flex-wrap: wrap;

    flex-direction: row;

}

}

Can you help me @tuanphan??

Thanks!

Hi. I see 2 columns here. Do you still need help on this?

Hi @tuanphan

Yes, my problem is that if I apply that code I get 2 columns in all summaries and I only need to 2 columns on that specific summary.

Is there a way to target only 1 summary and leave the other one (displayed here: https://www.bbarinaga.com/sobremi) as it is?

Thanks for your help!

7 hours ago, bbarinaga said:

Hi @tuanphan

Yes, my problem is that if I apply that code I get 2 columns in all summaries and I only need to 2 columns on that specific summary.

Is there a way to target only 1 summary and leave the other one (displayed here: https://www.bbarinaga.com/sobremi) as it is?

Thanks for your help!

 

@media screen and (max-width:640px) {
  div#page-5d07b2e4c2c5b00001d8c7ce {
    .sqs-block-summary-v2 .summary-item.positioned {
        width: 50% !important;
        position: static;
    }
    .sqs-block-summary-v2 .summary-item-list {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
  }
}

Thank you so much, @tuanphan!

@tuanphan

On 10/1/2020 at 8:00 AM, hahahome said:

@tuanphan

 

Site URL: http://hahahome.co/

Hi!

Can you also help me with my page as well? My e-commerce site needs to display 2 columns of products instead of one for easier view on mobile. How can I go about this? I tried some of your other codes but it didn't work, so i'm assuming I would need a different one.

 

Thank you so much!

pw: 1234

 

•  

Add to Home > Design > Custom CSS

/* mobile product 2 columns */
@media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 5px;
}
}

SITE URL: https://plum-dalmatian-7xe7.squarespace.com/

PW: Miles

Hey Tuanphan,

On a similar note, I've applied the following CSS to my mobile site, which has worked only partially unfortunately: 

@media screen and (max-width:640px) {
.sqs-block-summary-v2 .summary-item.positioned {
    width: 50% !important;
	padding: 5px;
    position: static;
}

.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: -100px;
}
}

As you can see on this mobile site, there's a humungous amount of vertical spacing between thumbnails.

Any ideas on how to fix this would be much appreciated.

p.s. Thank you for all you do for the community 

7 minutes ago, eraserrhead said:

SITE URL: https://plum-dalmatian-7xe7.squarespace.com/

PW: Miles

Hey Tuanphan,

On a similar note, I've applied the following CSS to my mobile site, which has worked only partially unfortunately: 

@media screen and (max-width:640px) {
.sqs-block-summary-v2 .summary-item.positioned {
    width: 50% !important;
	padding: 5px;
    position: static;
}

.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: -100px;
}
}

As you can see on this mobile site, there's a humungous amount of vertical spacing between thumbnails.

Any ideas on how to fix this would be much appreciated.

p.s. Thank you for all you do for the community 

Try this

@media screen and (max-width:640px) {
.sqs-block-summary-v2 .summary-item.positioned {
    width: 50% !important;
    padding: 5px;
    position: static;
    height: auto !important;
    top: 0 !important;
}
.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: auto !important;
}
}

Once again, you blow my mind. Thanks so much.

On 11/6/2020 at 9:28 PM, eraserrhead said:

Once again, you blow my mind. Thanks so much.

I see some pages have very long content. You can consider adding a back to top button (If you need this, I will send some free guide).

On Tablet, I see white blank space here. If you want to remove, add this to Home > Design > Custom CSS

/* remove blank section */
@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="5fa08395e72ea2331d047841"] {
	display: none !important;
}
}

On 11/6/2020 at 9:26 AM, tuanphan said:

 

Try this

@media screen and (max-width:640px) {
.sqs-block-summary-v2 .summary-item.positioned {
    width: 50% !important;
    padding: 5px;
    position: static;
    height: auto !important;
    top: 0 !important;
}
.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: auto !important;
}
}

 

Is there a way to have a 3 column view but on tablet only?

On 3/5/2021 at 11:29 PM, SSong said:

Is there a way to have a 3 column view but on tablet only?

width: 33.33% !important;