Jump to content

Photo Collage on Mobile CSS Help

Recommended Posts

Site URL: https://bohemia.squarespace.com/%C2%A0%C2%A0

Hello All!

I have a CSS question. On desktop I am working on a website with several overlapping collages that look great on desktop, however, I cannot crack the code for making them look good on mobile. I have tried several CSS codes to try and make the mobile version aesthetically pleasing, but nothing is working. Anyone have any idea how to make colleges (such as the one in the photo) look decent on mobile? Im not sure if its even possible, if so let me know and I will reconsider my overall design approach. 

Thanks in advance! 
 

Website: https://bohemia.squarespace.com/     Password: bohemia 

 

Screen Shot 2021-04-11 at 11.15.05 AM.png

Screen Shot 2021-04-11 at 11.21.32 AM.png

Link to comment
  • Replies 3
  • Views 726
  • Created
  • Last Reply
8 minutes ago, Brooke_Shea said:

Site URL: https://bohemia.squarespace.com/%C2%A0%C2%A0

Hello All!

I have a CSS question. On desktop I am working on a website with several overlapping collages that look great on desktop, however, I cannot crack the code for making them look good on mobile. I have tried several CSS codes to try and make the mobile version aesthetically pleasing, but nothing is working. Anyone have any idea how to make colleges (such as the one in the photo) look decent on mobile? Im not sure if its even possible, if so let me know and I will reconsider my overall design approach. 

Thanks in advance! 
 

Website: https://bohemia.squarespace.com/     Password: bohemia 

 

Screen Shot 2021-04-11 at 11.15.05 AM.png

Screen Shot 2021-04-11 at 11.21.32 AM.png

On mobile, it better to have them stack

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@bangank36 ok thanks! is there a way to make them stack on mobile without jeopardizing the look on desktop! I am fairly new to CSS and teaching myself, so I apologize if this is a rookie question! 

Link to comment
10 hours ago, Brooke_Shea said:

@bangank36 ok thanks! is there a way to make them stack on mobile without jeopardizing the look on desktop! I am fairly new to CSS and teaching myself, so I apologize if this is a rookie question! 

Wrap you twist into this media query css to let it apply on desktop (large screen only)

@media only screen and (max-width: 768px) {
	/* Place your code here */
}

Responsive Web Design Media Queries (w3schools.com)

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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.