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

Display two images per row on mobile version


majamalmcrona

Question

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;
}
}
Link to post
  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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: no

Do you still need help? 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

Posted Images

15 answers to this question

Recommended Posts

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

 

Link to post
  • 0

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

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

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

 

Link to post
  • 0

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

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

Link to post
  • 0

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

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

 

Link to post
  • 0

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

Edited by Erlend-fs
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...