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

Issue with multi-column images on mobile view

Question

Site URL: https://daisy-chameleon-5pc5.squarespace.com/modules

I'm essentially building out a "products" page, but I can't use the actual product's pages since I'm not selling these items directly on my site. With that being said, I've tried all kinds of different ways to display and layout the products, and just using image blocks has been the best I've been able to come up with so far. The issue I've run into is that on mobile, the stacked images make the page way to long and not very usable. I was able to make it a little better with @tuanphan's code from the post below, but I've run into another problem. 

Specifically, I'm now running into an issue where any rows with a single item are displaying their images as right oriented. I've tried adjusting the float property, and while changing it to "float: left" does fix that problem, all of my odd numbered rows now show their last image floating right with a blank space to the left. Any thoughts on the best way to handle this?

Here's what I currently have running:

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

Here it the page I'm working on. (pw: mothership)

float: right issue

image.png.a673e449ffabd69e294668cca3ff9453.png

float: left issue

image.png.447d962747222383e08830b1116b58c2.png

 

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0
10 hours ago, elilongwell said:

Well, I tried that, but then realized that I can't actually edit the product pages to the extent that I need to be able to. I basically need to have a full page for each product with new sections that I can put in and everything. On top of that, there are a couple other places where I'm still having this stacking problem on mobile that I need to figure out.

@media screen and (max-width:767px) {
div#page-section-5e97b45ae7ee50004720233c>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5e97b45ae7ee50004720233c>.row>.col>.row>.col:nth-child(2n+3) {
    clear: left !important;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

You can use products, then use code to remove price, quantity, add to cart..

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
2 hours ago, tuanphan said:

You can use products, then use code to remove price, quantity, add to cart..

 

Well, I tried that, but then realized that I can't actually edit the product pages to the extent that I need to be able to. I basically need to have a full page for each product with new sections that I can put in and everything. On top of that, there are a couple other places where I'm still having this stacking problem on mobile that I need to figure out.

Share this post


Link to post
  • 0
On 4/18/2020 at 8:50 AM, tuanphan said:

@media screen and (max-width:767px) {
div#page-section-5e97b45ae7ee50004720233c>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5e97b45ae7ee50004720233c>.row>.col>.row>.col:nth-child(2n+3) {
    clear: left !important;
}
}

 

Thanks! That worked great!

Share this post


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