Jump to content

Display two images per row on mobile version

Recommended Posts

Posted

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;
}
}
  • Replies 15
  • Views 4.7k
  • Created
  • Last Reply
Posted
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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?

 

IMG_5146.PNG

Posted
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?

 

IMG_5146.PNG

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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

Screenshot 2021-02-18 at 07.48.45.png

Screenshot 2021-02-18 at 07.49.18.png

Screenshot 2021-02-18 at 07.50.37.png

Screenshot 2021-02-18 at 07.49.55.png

Posted
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

Screenshot 2021-02-18 at 07.48.45.png

Screenshot 2021-02-18 at 07.49.18.png

Screenshot 2021-02-18 at 07.50.37.png

Screenshot 2021-02-18 at 07.49.55.png

edit 768px to 1px

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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!

Screenshot 2021-02-19 at 08.02.51.png

Screenshot 2021-02-19 at 08.03.02.png

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

Screenshot 2021-02-19 at 08.02.51.png

Screenshot 2021-02-19 at 08.03.02.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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

Screenshot 2021-02-22 at 09.09.15.png

Screenshot 2021-02-22 at 09.27.24.png

Screenshot 2021-02-22 at 09.38.25.png

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.