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

3 images side by side on mobile view


mikom10

Question

Recommended Posts

  • 0
1 minute ago, CharlesOng said:

Hello - I also have been having this issue. Trying to get the store buttons to appear side by side on mobile. Any help would be much appreciated.  

Site is offline until we get it right. 

https://collie-goose-bfbb.squarespace.com/
PASSWORD: Qwerty321

Thanks in advance for your help.  

 

image.thumb.png.4cf6807cdf5c831494c42d312e2ac263.png

image.thumb.png.6c006941435c42ca6a2fc70184b2f830.png

You mean buttons or Lazada/Shopee images?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
4 hours ago, CharlesOng said:

https://collie-goose-bfbb.squarespace.com/sildenafil

Oh I'm sorry - I meant the lazada and shopee images.
I am hoping to put them side by side on mobile.  

Newbie here - your time is greatly appreciated.  

I hope this help


@media only screen and (max-width: 768px) {
  #block-c24966fd8a2c5b3f2d02 + .row .col {
    width: 50% !important;
    float: left !important;
  }
}

image.thumb.png.3561ec2b03cae4efc6fc9e3c1ede5f3c.png

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
15 hours ago, bangank36 said:

@media only screen and (max-width: 768px) { #block-c24966fd8a2c5b3f2d02 + .row .col { width: 50% !important; float: left !important; } }

 

15 hours ago, bangank36 said:

I hope this help



@media only screen and (max-width: 768px) {
  #block-c24966fd8a2c5b3f2d02 + .row .col {
    width: 50% !important;
    float: left !important;
  }
}

image.thumb.png.3561ec2b03cae4efc6fc9e3c1ede5f3c.png

This is amazing thank you so very very much.  I know your time is valuable and I do appreciate your help greatly.  Take care!

 

 

Link to comment
  • 0

Hi there, I'm hoping to display the services icons within each markdown area as 3 per row on mobile please.
They are images rather than a gallery, is it possible to make a code so that all images within https://www.soundsound.co.uk/#services-1 display 3 per row on mobile please? I will be adding further markdown areas too on that page. 

Many thanks

Link to comment
  • 0
14 hours ago, HamishC said:

password is 'progress', thanks!

Add to Design > Custom CSS

/* Mobile 3 icons */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1623257149439_2969 .slide {
    width: 33.333% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

Hello @tuanphan ! I have some issues with my art website: www.victorlavastre.com

I create a fresco with different images and i need 3 images large on the gallery of the mobile version. I tried all the css code posted on this topic but nothing work.

Many thanks for your help men !

2BCB2296-836F-44FD-B006-92343B6E3A4A.jpeg

D9209C65-FAF9-40C3-82B3-C70C8D2828BB.png

Edited by VLvstr
Link to comment
  • 0
15 hours ago, VLvstr said:

Hello @tuanphan ! I have some issues with my art website: www.victorlavastre.com

I create a fresco with different images and i need 3 images large on the gallery of the mobile version. I tried all the css code posted on this topic but nothing work.

Many thanks for your help men !

2BCB2296-836F-44FD-B006-92343B6E3A4A.jpeg

D9209C65-FAF9-40C3-82B3-C70C8D2828BB.png

Hi. I see you solved this?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 6/18/2021 at 8:42 AM, tuanphan said:

Hi. I see you solved this?

@tuanphanNo i didn’t… I need help please (sorry about my english i’m french). The first image is the desktop version and i want this for the mobile version !

thank you for your answer

Edited by VLvstr
Link to comment
  • 0
On 6/18/2021 at 2:31 PM, VLvstr said:

@tuanphanNo i didn’t… I need help please (sorry about my english i’m french). The first image is the desktop version and i want this for the mobile version !

thank you for your answer

Add to Design > Custom CSS

/* Mobile gallery */
@media screen and (max-width:767px) {
.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3,1fr);
}

figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}

.gallery-masonry-item-wrapper {
    height: auto !important;
}
}

See how I checked the code. https://www.loom.com/share/68174c92c31448929882580ffea6c783

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
11 hours ago, tuanphan said:

Add to Design > Custom CSS


/* Mobile gallery */
@media screen and (max-width:767px) {
.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3,1fr);
}

figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}

.gallery-masonry-item-wrapper {
    height: auto !important;
}
}

See how I checked the code. https://www.loom.com/share/68174c92c31448929882580ffea6c783

Hello @tuanphan !

thank you so much ! You’re the best !

if you have an NFT wallet I can send you one of my square as a thank you ! You can send me your wallet adress on my email: victorlavastre@gmail.com

Best regards !

Link to comment
  • 0
On 6/21/2021 at 8:57 PM, VLvstr said:

Hello @tuanphan !

thank you so much ! You’re the best !

if you have an NFT wallet I can send you one of my square as a thank you ! You can send me your wallet adress on my email: victorlavastre@gmail.com

Best regards !

Do you need help on these?

Site URL – https://www.victorlavastre.com/

1. (Tablet-Homepage) Fix image?

victorlavastre.com-01-min.png

2. (Header) change Link icon to Opensea logo?

victorlavastre.com-02-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 6/29/2021 at 8:48 PM, Sidsel said:

I really need help with this to... 

The design on desktop is a bit different then normal, so I have trouble finding the right code for this.

I need the images to align side by side, 2 or three at a time on mobile. Speficic on this page, and no other. 

https://yo-studios.squarespace.com/team-yo

Code: YO2021

Hi. All images on Team Yo page or which images?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

hello @tuanphan -- could you please help me as well? I would really really appreciate it --- I need help getting either the 3 separate images on the top, or the gallery of 3 show as 3 in a row on mobile. For desktop, I have no problem. Please let me know if it's better to leave 3 images, or gallery of 3 so that it can be 3 in a row on mobile as well... THANK YOU!!

Website is: http://visuallyaudible.net/cvr-book

The image on the bottom is what the mobile version currently looks like.

Screen Shot 2021-07-20 at 1.54.09 AM.png

IMG_9798.PNG

Edited by visuallyaudible
Link to comment
  • 0
23 hours ago, visuallyaudible said:

hello @tuanphan -- could you please help me as well? I would really really appreciate it --- I need help getting either the 3 separate images on the top, or the gallery of 3 show as 3 in a row on mobile. For desktop, I have no problem. Please let me know if it's better to leave 3 images, or gallery of 3 so that it can be 3 in a row on mobile as well... THANK YOU!!

Website is: http://visuallyaudible.net/cvr-book

The image on the bottom is what the mobile version currently looks like.

Screen Shot 2021-07-20 at 1.54.09 AM.png

IMG_9798.PNG

answered your email

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

Needing help with this too please - have tried doing it myself but not having much joy!

iapmd.org/links

Password: review 

Trying to recreate a web version of the lnk.bio - 6 social images along the top (not stacking) and then the images 3 across and not stacking. 

 

Could you assist please? 

229054901_4415013455189439_241940634596754497_n.jpg

229605051_562835938205395_7848785760241992517_n.jpg

Link to comment
  • 0
On 8/3/2021 at 2:06 AM, IAPMD said:

Needing help with this too please - have tried doing it myself but not having much joy!

iapmd.org/links

Password: review 

Trying to recreate a web version of the lnk.bio - 6 social images along the top (not stacking) and then the images 3 across and not stacking. 

 

Could you assist please? 

229054901_4415013455189439_241940634596754497_n.jpg

229605051_562835938205395_7848785760241992517_n.jpg

Hi, you mean make 6 images/row on desktop & 3 images/row on mobile?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
6 hours ago, chavous_writes said:

Me too please! Underneath the main GUCCI banner, there is a row of four images. On mobile, I would like to show two images side by side in two rows, instead of stacked. Can you help? Thank you!

https://lobster-parakeet-5fh3.squarespace.com/

Pass: MV

Screen Shot 2021-08-04 at 2.51.29 PM.png

Add to Design > Custom CSS

/* Homepage images side by side mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1626997556614_6498+.row .span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1626997556614_6498+.row .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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