Jump to content

Images Side by Side in Mobile View

Recommended Posts

Site URL: https://cone-saffron-cgrj.squarespace.com/about

Hello,

I would like to place the first two images side by side in mobile view like they are displayed in desktop view rather than being stacked.1378264536_ScreenShot2021-11-30at1_28_44PM.thumb.png.bcb5da0c4986a6aecc81b969cd860c6a.png

There are also three images at the bottom of the page that I have the same problem with.499185566_ScreenShot2021-11-30at1_28_52PM.thumb.png.f20421eae2e8dd29d28491c8736e5794.pngI've tried everything to make it work and I can't seem to figure it out. I'd love someones help with this. Thank you in advance!

Link to comment
8 hours ago, kourtnieriv said:

Site URL: https://cone-saffron-cgrj.squarespace.com/about

Hello,

I would like to place the first two images side by side in mobile view like they are displayed in desktop view rather than being stacked.1378264536_ScreenShot2021-11-30at1_28_44PM.thumb.png.bcb5da0c4986a6aecc81b969cd860c6a.png

There are also three images at the bottom of the page that I have the same problem with.499185566_ScreenShot2021-11-30at1_28_52PM.thumb.png.f20421eae2e8dd29d28491c8736e5794.pngI've tried everything to make it work and I can't seem to figure it out. I'd love someones help with this. Thank you in advance!

Could you enable site wide password so we can help easier

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="61a570d486659c7cf296a03f"]
    .sqs-layout
    .span-10
    .span-5 {
    width: 50% !important;
    float: left !important;
  }
}

Let me know how it works

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
22 minutes ago, bangank36 said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="61a570d486659c7cf296a03f"]
    .sqs-layout
    .span-10
    .span-5 {
    width: 50% !important;
    float: left !important;
  }
}

Let me know how it works

Support me by pressing 👍 if this useful for you

It worked! Thank you. Is there any way I can move the images closer together?386970277_ScreenShot2021-12-01at11_00_25AM.png.56ab4d46a8dd197fb4915315f8c464d6.png

Link to comment
24 minutes ago, bangank36 said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="61a570d486659c7cf296a03f"]
    .sqs-layout
    .span-10
    .span-5 {
    width: 50% !important;
    float: left !important;
  }
}

Let me know how it works

Support me by pressing 👍 if this useful for you

How would I translate this code to work for the three images I have at the bottom of the page?

Link to comment

@kourtnieriv Don't remove above code

#1. To reduce space, add this CSS

/* Mobile - about images */
@media screen and (max-width:767px) {
/* left image */
div#block-yui_3_17_2_1_1638284585867_2289 {
    padding-right: 5px !important;
}
/* right image */
div#block-yui_3_17_2_1_1638284585867_3326 {
    padding-left: 5px !important;
}
}

#2. For 3 images at bottom of page, use this CSS

/* Mobile - about 3 images */
@media screen and (max-width:767px) {
div#page-section-61a641c039c80d10d891a139 {
&>.row>.span-4 {
    width: 33.3333% !important;
    float: left !important;
}
&>.row>.span-8 {
    width: 66.6667% !important;
    float: left !important;
}
&>.row>.span-8>.row>.span-4 {
    width: 50% !important;
    float: left !important;
}
}
}

image.thumb.png.b9467772b39d9aa2aef4bd11e12bfdc7.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 12/4/2021 at 2:47 AM, tuanphan said:

@kourtnieriv Don't remove above code

#1. To reduce space, add this CSS

/* Mobile - about images */
@media screen and (max-width:767px) {
/* left image */
div#block-yui_3_17_2_1_1638284585867_2289 {
    padding-right: 5px !important;
}
/* right image */
div#block-yui_3_17_2_1_1638284585867_3326 {
    padding-left: 5px !important;
}
}

#2. For 3 images at bottom of page, use this CSS

/* Mobile - about 3 images */
@media screen and (max-width:767px) {
div#page-section-61a641c039c80d10d891a139 {
&>.row>.span-4 {
    width: 33.3333% !important;
    float: left !important;
}
&>.row>.span-8 {
    width: 66.6667% !important;
    float: left !important;
}
&>.row>.span-8>.row>.span-4 {
    width: 50% !important;
    float: left !important;
}
}
}

image.thumb.png.b9467772b39d9aa2aef4bd11e12bfdc7.png

Thank you so much! I really appreciate your help

Link to comment
  • 6 months later...
1 hour ago, ajgorkin said:

Hi! 

I'd love to do the same for my homepage. I'd love to show the first set of Image blocks in rows of 4 on mobile like they are on desktop and tablet.

 

www.andreworkinmusic.com

Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#page-6183cf0a1e84e05f87639de9 .span-3 {
    width: 25% !important;
    float: left !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 7/4/2022 at 6:44 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#page-6183cf0a1e84e05f87639de9 .span-3 {
    width: 25% !important;
    float: left !important;
}
}

 

Amazing thank you!!

Is it possible to do the same for the four summary blocks below as well?

Edited by ajgorkin
Link to comment
1 hour ago, ajgorkin said:

Amazing thank you!!

Is it possible to do the same for the four summary blocks below as well?

Use this new code

@media screen and (max-width:640px) {
div#page-6183cf0a1e84e05f87639de9 .span-3 {
    width: 25% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1636116360889_222661 .summary-item {
    width: calc(~"50% - 20px") !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
}
div#block-yui_3_17_2_1_1636116360889_222661 .summary-item:nth-child(2n+1) {
    margin-right: 20px !important;
    clear: left !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.