Jump to content

Side by Side Image Gallery for Mobile View

Recommended Posts

Site URL: https://www.chanellstone.com/

Hello, 

I am running into an issue where my images display stacked rather than as a side by side gallery view on the mobile web view. I am using the Wells template. 

I would like all images in every navigation section to display horizontally (with ability to toggle through with arrows). 
Additionally, how do I resize the images for mobile view?

Can someone please help me with this?

Thank you! 

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 7/13/2022 at 7:46 AM, tuanphan said:

Hi. Which page are you referring to?

The pages "Natura Negra", "Works in Progress" and "Exhibitions" -- these are the pages made as galleries. However, on the mobile view the images are stacked vertically rather than side by side (horizontally). I want these images to scroll side by side (horizontal). 

https://www.chanellstone.com/natura-negra

https://www.chanellstone.com/exhibition

https://www.chanellstone.com/work-in-progress

Link to comment

If make side by side, it won't work.

Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#slideshow {
    display: grid !important;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 20px 20px;
}
}

 

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
  • 1 month later...

hello @tuanphan

i have tried using your code

display: grid !important;

but no wonder, it didnt work with me.

i have learned this little code here and it works:

/* shop image size */
@media only screen and (max-width:640px) {section[data-section-id="62ab38dc3d5b44468b10ab23"] {width:60%; margin:auto;  
}}

how do i make my articles in shop appear side by side please? (2 articles in a row)

if i go under 50% the categories will be cut and not centered neither. Any help appreciated!

my link is https://www.lonniwong.com/shop


229426956_Bildschirmfoto2022-09-13um10_14_54.thumb.png.6a8d99327a2a143e07290ef41ed352bd.png

Link to comment
On 9/13/2022 at 3:19 PM, LonniWong said:

hello @tuanphan

i have tried using your code

display: grid !important;

but no wonder, it didnt work with me.

i have learned this little code here and it works:

/* shop image size */
@media only screen and (max-width:640px) {section[data-section-id="62ab38dc3d5b44468b10ab23"] {width:60%; margin:auto;  
}}

how do i make my articles in shop appear side by side please? (2 articles in a row)

if i go under 50% the categories will be cut and not centered neither. Any help appreciated!

my link is https://www.lonniwong.com/shop


229426956_Bildschirmfoto2022-09-13um10_14_54.thumb.png.6a8d99327a2a143e07290ef41ed352bd.png

Do not add to Custom CSS

Add this code to Settings > Advanced > Code Injection > Header

<style>
  @media screen and (max-width:767px) {
  .products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px;
}
  }
</style>

 

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.