Display two images per row on mobile version

Site URL: http://www.majamalmcrona.com/

Hey guys!

My website majamalmcrona.com has a row of three images displayed on the front page (image blocks). On the mobile version, it currently shows up as only one row of image.

I would like the mobile version to have two rows of images. Anyone know how to go about this?

I've seen the code below been shared a few times with regards to this, but to me it doesn't seem to work...

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

Hi. Do you still need help on this?

 And which plan do you use? Personal or Business Plan?

Hi tuanphan, yes, please, I do! I use a Personal plan. 

On 2/6/2021 at 5:50 PM, majamalmcrona said:

Hi tuanphan, yes, please, I do! I use a Personal plan. 

Add to Design > Custom CSS

/* 2 images mobile */
@media screen and (max-width:767px) {
div#page-5ebd4058035b3a35aa4a5992 .image-block {
    width: 50%;
    float: left !important;
    clear: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
div#page-5ebd4058035b3a35aa4a5992 .image-block:nth-child(2n+1) {
    clear: left !important;
}
}

You are amazing, this works! Thank you so much!

One small tweak. The images seem to have moved slightly both horizontally and vertically, not sure why this is the case. They should have a small gap between them (similar to the desktop version). See image for what I mean...any clue why this is the case?

Hello,

I've the same problem. Is it possible to make my summary page show 2 image per row on mobile?
I tried that code but it doesn't seem to work.

Here's the url https://www.porventura.pt/en/all-collection

Also, do you know if it's possible to have those images changing to a secondary image on mouse hover?

thank you very much,

Ana

On 2/8/2021 at 1:20 PM, majamalmcrona said:

You are amazing, this works! Thank you so much!

One small tweak. The images seem to have moved slightly both horizontally and vertically, not sure why this is the case. They should have a small gap between them (similar to the desktop version). See image for what I mean...any clue why this is the case?

 

Do you still need help?

On 2/12/2021 at 5:38 AM, AnaCalheiros said:

Hello,

I've the same problem. Is it possible to make my summary page show 2 image per row on mobile?
I tried that code but it doesn't seem to work.

Here's the url https://www.porventura.pt/en/all-collection

Also, do you know if it's possible to have those images changing to a secondary image on mouse hover?

thank you very much,

Ana

Q1. Add to Design > Custom CSS

/* products 2 columns mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1573716009710_3722 .summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
}

Q2. Use this plugin.

22 hours ago, tuanphan said:

Do you still need help?

Yes, please!

On 2/15/2021 at 5:17 PM, majamalmcrona said:

Yes, please!

Find this code

div#page-5ebd4058035b3a35aa4a5992 .image-block {
    width: 50%;
    float: left !important;
    clear: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

change to this

div#page-5ebd4058035b3a35aa4a5992 .image-block {
    width: 50%;
    float: left !important;
    clear: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

Flawless! Thank you so, so much! 

I have a similar issue.

I want these images display in two columns on tablet and mobile.

I´ve accomplished to get them onto two column with screen size between 768-980px by using the code below. But I don´t understand how to make them display in two column below 768px screen size.

/* CSS code - two column between 768-980px*/

@media only screen and (min-width: 768px) and (max-width: 980px) {
  #collection-602cc9394fdf411229b86e4e .sqs-col-3 {
    width: 50%;
    display: inline-block;
    float: none;
    vertical-align: top
  }
}

/* End - CSS code*/

Site url: https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau

pw: hoyden2021

15 hours ago, Erlend-fs said:

I have a similar issue.

I want these images display in two columns on tablet and mobile.

I´ve accomplished to get them onto two column with screen size between 768-980px by using the code below. But I don´t understand how to make them display in two column below 768px screen size.

 

/* CSS code - two column between 768-980px*/

@media only screen and (min-width: 768px) and (max-width: 980px) {
  #collection-602cc9394fdf411229b86e4e .sqs-col-3 {
    width: 50%;
    display: inline-block;
    float: none;
    vertical-align: top
  }
}

/* End - CSS code*/

 

Site url: https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau

pw: hoyden2021

edit 768px to 1px

Thanks for your reply tuanphan.

I've tried that, but everything below 768px gets wired...

See attached screenshots.

I've made a copy of the page, to explore this issue (other people are reviewing the main page, so I won't mess it up) 

https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau-2

I think I almost found a solution now.

The images scales down 50%. but won't display next to each other.

I'm using the following code:

---------------------------------

@media only screen and (min-width: 767px) and (max-width: 980px) {
  #collection-602f5b8a6452217c32690f5e .sqs-col-3 {
    width: 50%;
    display: inline-block;
    float: none;
    vertical-align: top
  }
}

@media only screen and (min-width: 300px) and (max-width: 767px) {
  #collection-602f5b8a6452217c32690f5e .sqs-block-content {
    width: 50%;
    display: inline-block;
    float: none;
    vertical-align: top;
  }
}

---------------------------

The first section of code are talking to four culumn blocks (sqs-col-3 ), right?

Since Squarespace are scaling down to one column after 767px, I guess this code won't work below 767px..?

Therefore, I tried to find another code that could talk to the layout below 767px. 

".sqs-block-content" seems to work, but I do not know how to get the images to appear next to each other.

If you have a solution to this, it would be great!

On 2/19/2021 at 2:13 PM, Erlend-fs said:

I've made a copy of the page, to explore this issue (other people are reviewing the main page, so I won't mess it up) 

https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau-2

 

I think I almost found a solution now.

The images scales down 50%. but won't display next to each other.

I'm using the following code:

 

---------------------------------

@media only screen and (min-width: 767px) and (max-width: 980px) {
  #collection-602f5b8a6452217c32690f5e .sqs-col-3 {
    width: 50%;
    display: inline-block;
    float: none;
    vertical-align: top
  }
}

@media only screen and (min-width: 300px) and (max-width: 767px) {
  #collection-602f5b8a6452217c32690f5e .sqs-block-content {
    width: 50%;
    display: inline-block;
    float: none;
    vertical-align: top;
  }
}

---------------------------

 

The first section of code are talking to four culumn blocks (sqs-col-3 ), right?

Since Squarespace are scaling down to one column after 767px, I guess this code won't work below 767px..?

Therefore, I tried to find another code that could talk to the layout below 767px. 

".sqs-block-content" seems to work, but I do not know how to get the images to appear next to each other.

If you have a solution to this, it would be great!

Add to Design > Custom CSS > Then save & reload your site

/* image side by side */
@media screen and (max-width:767px) {
div#page-section-602f5b8a6452217c32690f60 .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-602f5b8a6452217c32690f60 .span-3 .sqs-block-content {
    width: 100% !important;
}
div#page-section-602f5b8a6452217c32690f60 .span-3 * {
    font-size: 12px !important;
}
}

This works perfectly! Thank you so much tuanphan!

Now, I'm only having two issues with the text.

I'm using the poster image block option (see screenshot 1).

1 - alignment 

I would like the text to be vertically aligned at the top (and not the center) of the images.

I've tried to use vertical-align: top; in the css, but without luck.

2 - line height

I'm struggling getting the line height small enough on screens below 1200px width.

I´ve added custom css to make the font size scale in a good way to different screen sizes.

In this code, I'm also controlling the line height, but around 1200px, the line height has reached 0px, but I would like it smaller. (see screenshot 2)

- See attached screenshot 3 with a screen of 990px width (too much line height)
 

It would be great if there is a solution to this!

Site url: https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau

pw: hoyden2021