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 post
  • Answers 84
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Your site is private. Can you setup password & share url again?

Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#block-5e9840e42d95cc671880ffd3+.row .span-2 { width: 50% !important; float: left !important; } }  

Have you solved it yet?

Posted Images

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

 

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

 

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

 

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

 

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