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

2 column image stacking on mobile?


pashapasha1570048753

Question

So please bear with me as I'm a novice when it comes to CSS or any of this. I've been trying to google answers for the past few hours now to no avail. Essentially I'm just looking to have 1:1 images, with a title and a description, stacked in 2 columns on mobile.

A gallery grid does basically what I want on desktop and mobile - but doesn't show descriptions. A summary block does it too but stacks one image on top of another and when I have 60+ images, it becomes a huge scroll. I have not been able to find solutions to either of these issues so if you have a solution to either instead it'd be greatly appreciated.

So now, I've just succumbed to doing individual image stacks. I've found out how to shrink the image blocks just in mobile, however I still can't them to form rows/columns despite the extra room now they have on the right (as seen in the screenshot). The code I'm using is below.

Any insight would be greatly appreciated.

alt text

alt text

screen-shot-2019-09-03-at-10101-pm.jpg.2c83431198a2299f23e032072954cee5.jpg

screen-shot-2019-09-03-at-10603-pm.png.b5af66d6894ad61b5a001dc8d559f734.png

Edited by pashapasha
Initial Revision
Link to comment

Recommended Posts

  • 0
On 2/15/2021 at 3:33 PM, katie_w_3 said:

Hi @tuanphan, apologies, the url is https://www.unarodden.com/the-gift-edit

I have the columns working now but is there anyway to have the images read left to right from my desktop site, as opposed to vertically?  It really scrambles the order.  Thanks so much!

Missing your comment :( Do you still need help?

On 3/26/2021 at 2:56 PM, shannamc said:

@tuanphanHi! Would you please be able to help me get these square images to be in 2 columns on mobile? 

URL: https://hexaflexagon-terrier-4kwy.squarespace.com/sign-up

PW: quickfit2021

Thank you so much!

Add to Design > Custom CSS

/* sign up images side by side */
@media screen and (max-width:767px) {
div#page-section-605d894750862c5f0f7f7167, div#page-section-605d894750862c5f0f7f7167 { .span-12>.row:first-child>.span-3 {
    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
5 hours ago, tuanphan said:

Add to Design > Custom CSS


/* sign up images side by side */
@media screen and (max-width:767px) {
div#page-section-605d894750862c5f0f7f7167, div#page-section-605d894750862c5f0f7f7167 { .span-12>.row:first-child>.span-3 {
    width: 50% !important;
    float: left !important;
}
}
}

Hi @tuanphan

Thank you so much for taking the time to reply! This has worked for the left hand 2 column section of the desktop images, but not for the right hand 2 columns, they are displaying as one column on mobile. 

Is there a fix for this? 

 

IMG_5931.png

Link to comment
  • 0
On 3/30/2021 at 3:05 AM, shannamc said:

Hi @tuanphan

Thank you so much for taking the time to reply! This has worked for the left hand 2 column section of the desktop images, but not for the right hand 2 columns, they are displaying as one column on mobile. 

Is there a fix for this? 

 

IMG_5931.png

Add new code

/* sign up images side by side */
@media screen and (max-width:767px) {
div#page-section-605d894750862c5f0f7f7167, div#page-section-605d894750862c5f0f7f7167 { .span-12>.row:first-child>.span-3 {
    width: 50% !important;
    float: left !important;
}
}
div#page-section-605d894750862c5f0f7f7167 .span-12 .span-6 .span-3 {
    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
On 3/31/2021 at 7:50 PM, tuanphan said:

Add new code


/* sign up images side by side */
@media screen and (max-width:767px) {
div#page-section-605d894750862c5f0f7f7167, div#page-section-605d894750862c5f0f7f7167 { .span-12>.row:first-child>.span-3 {
    width: 50% !important;
    float: left !important;
}
}
div#page-section-605d894750862c5f0f7f7167 .span-12 .span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

 

That has worked, thank you so much!

Link to comment
  • 0
On 4/6/2021 at 7:27 PM, ThisWayToFabulous said:

@tuanphan I'm trying to do similar with the icons toward the bottom of my page! The icons (4 across) all just stack. Ideally id love if it stayed 4 across but I could make do with 2 x 2.

https://culitrade.squarespace.com/about-culitrade

 

Password is JESSI

Hi. Add to Design > Custom CSS

/* Icons side by side */
@media screen and (max-width:767px) {
div#page-section-6064e1a45a6eba7d94e16010 .span-12>.row .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6064e1a45a6eba7d94e16010 .span-12>.row .span-3: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
On 4/6/2021 at 7:27 PM, ThisWayToFabulous said:

@tuanphan I'm trying to do similar with the icons toward the bottom of my page! The icons (4 across) all just stack. Ideally id love if it stayed 4 across but I could make do with 2 x 2.

https://culitrade.squarespace.com/about-culitrade

 

Password is JESSI

Also, I see the site has problems

Site URL: https://culitrade.squarespace.com/

1. (Mobile-Header) Logo disappear

culitrade.squarespace.com-mobile-header-

2. (Tablet-About) Icons don’t look good.

culitrade.squarespace.com-tablet-about-m

3. (Overlay Menu) No items. Want to remove overlay?

culitrade.squarespace.com-overlay-menu-m

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
2 hours ago, katie_w_3 said:

yes please @tuanphan, I would still love some help if possible!  Many thanks

Q1. It looks like you solved? However mobile menu has no item. Do you want to remove burger icon?

Q2. Add to Design > Custom CSS

/* About page - tablet - icons */
@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="6064e1a45a6eba7d94e16010"] .content {
    width: 90% !important;
}
}

Q3. Add to Design > Custom CSS

/* remove burger */
.burger-box {
    visibility: hidden;
}

 

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

Hi @tuanphan

I have a problem with the code you gave for the two colomns on mobile.

Here is the version on desktop :

advantage-desktop.thumb.png.07c65d0d6adb76e75ae2ad70dc2decb2.png

 

And for the mobile version, as it takes the colomns, the last image with the heart is on the bottom alone. I woulk like it at the right of the image of the plate and fork. See in green below :

advantage-phone.thumb.png.26bbe5571e013049b74c390f4e12f22c.png

Here is the code I used :

//Colone mobile - Image Entreprise//
@media screen and (max-width:767px) {
div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;  
}
div#page-section-607021392d09fc7af89b174d .image-block {
    padding: 5px;
}
div#page-section-607021392d09fc7af89b174d .image-block * {
    margin-bottom: 2px;
}}

Here is the website : https://chimes-poodle-kggl.squarespace.com/carte-entreprise

Pass : Advantage-Club

 

Thank you so much for your help @tuanphan !

 

 

Link to comment
  • 0
On 5/20/2021 at 8:15 PM, Esoes_design said:

Hi @tuanphan

I have a problem with the code you gave for the two colomns on mobile.

Here is the version on desktop :

advantage-desktop.thumb.png.07c65d0d6adb76e75ae2ad70dc2decb2.png

 

And for the mobile version, as it takes the colomns, the last image with the heart is on the bottom alone. I woulk like it at the right of the image of the plate and fork. See in green below :

advantage-phone.thumb.png.26bbe5571e013049b74c390f4e12f22c.png

Here is the code I used :

//Colone mobile - Image Entreprise//
@media screen and (max-width:767px) {
div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;  
}
div#page-section-607021392d09fc7af89b174d .image-block {
    padding: 5px;
}
div#page-section-607021392d09fc7af89b174d .image-block * {
    margin-bottom: 2px;
}}

Here is the website : https://chimes-poodle-kggl.squarespace.com/carte-entreprise

Pass : Advantage-Club

 

Thank you so much for your help @tuanphan !

 

 

try this new code

@media screen and (max-width:767px) {
div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;  
}
div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col:nth-child(2n+1) {
    clear: left !important;  
}
div#page-section-607021392d09fc7af89b174d .image-block {
    padding: 5px;
}
div#page-section-607021392d09fc7af89b174d .image-block * {
    margin-bottom: 2px;
}}

 

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 5/21/2021 at 4:40 PM, tuanphan said:

try this new code


@media screen and (max-width:767px) {
div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;  
}
div#page-section-607021392d09fc7af89b174d>.row>.col>.row>.col:nth-child(2n+1) {
    clear: left !important;  
}
div#page-section-607021392d09fc7af89b174d .image-block {
    padding: 5px;
}
div#page-section-607021392d09fc7af89b174d .image-block * {
    margin-bottom: 2px;
}}

 

Thanks but this code is still not working ...

Link to comment
  • 0
13 hours ago, Esoes_design said:

Thanks but this code is still not working ...

Did you edit something after post this question?

If you change, reorder anyblocks, the code won't work.

When you done design, let me know. We will check again.

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
14 hours ago, Ingrid89 said:

@tuanphan 

 

Thanks for the code for the two columns, however, it only works on my upper row. The rest is still divided. See screenshot. 

Schermafbeelding 2021-05-25 om 11.56.53.png

Can you share link to page in screenshot? We will check it again

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 sure! https://www.guimauve.nl/bracelets (this is the link, password = ingrid). 

The way I have it right now is with this code below. In mobile view, the upper row is two by two, the rest is still stacked. I would love all my products two by two. 

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

div#page-section-60acb063f2c8f00460869887>.row>.col>.row>.col> {

    width: 50% !important;

    float: left !important;

}

}

 

Link to comment
  • 0
9 minutes ago, Ingrid89 said:

@tuanphan sure! https://www.guimauve.nl/bracelets (this is the link, password = ingrid). 

The way I have it right now is with this code below. In mobile view, the upper row is two by two, the rest is still stacked. I would love all my products two by two. 

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

div#page-section-60acb063f2c8f00460869887>.row>.col>.row>.col> {

    width: 50% !important;

    float: left !important;

}

}

 

Dont remove any code in your current code

Add this to Design > Custom CSS

/* mobile 2 columns */
@media screen and (max-width:767px) {
div#page-section-60acb063f2c8f00460869887 .span-12>.row:nth-child(2)>.span-9 {
    width: 100% !important;
}
div#page-section-60acb063f2c8f00460869887 .span-9 .span-6 .span-3 {
    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

This is so awesome! @tuanphan I would so appriecate your help here! I've been trying to figure this our for the life of me! let's say I wanted a Summary Block to consist of 2 rows of 2 photos on mobile, and still have the ability to use the arrow to scroll to see more images.

So it will basically display 4 images at a time on Mobile.

I found a code that allows my Summary block to stack in two columns and show all images on mobile, but it'd like it to stack two columns and show only 4 images at a time, with the option to scroll through to see the next set of 4 images. So scrolling by 4 at a time.

 

Code I am using found at: https://www.rebeccagracedesigns.com/blog/summary-two-columns-mobile

SEE IMAGE ATTACHED FOR EXMAMPLE

@media only screen and (max-width: 640px) {
.summary-item-list {
display: flex;
flex-wrap: wrap;
}
.summary-item {
width: 45% !important;
margin: 4vw 2vw !important;
}
}

Screen Shot 2021-06-25 at 2.15.29 PM.png

Link to comment
  • 0
On 6/26/2021 at 7:20 AM, Nondys said:

This is so awesome! @tuanphan I would so appriecate your help here! I've been trying to figure this our for the life of me! let's say I wanted a Summary Block to consist of 2 rows of 2 photos on mobile, and still have the ability to use the arrow to scroll to see more images.

So it will basically display 4 images at a time on Mobile.

I found a code that allows my Summary block to stack in two columns and show all images on mobile, but it'd like it to stack two columns and show only 4 images at a time, with the option to scroll through to see the next set of 4 images. So scrolling by 4 at a time.

 

Code I am using found at: https://www.rebeccagracedesigns.com/blog/summary-two-columns-mobile

SEE IMAGE ATTACHED FOR EXMAMPLE


@media only screen and (max-width: 640px) {
.summary-item-list {
display: flex;
flex-wrap: wrap;
}
.summary-item {
width: 45% !important;
margin: 4vw 2vw !important;
}
}

Screen Shot 2021-06-25 at 2.15.29 PM.png

Did you solve?

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...