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

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-5d13d7c4990c4f00014c0845 .span-12 {
.span-4 {
    width: 33.33% !important;
    float: left !important;
}
.span-4 * {
    font-size: 20px !important;
}
}
}

 

Link to comment
  • 0
8 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
div#page-5d13d7c4990c4f00014c0845 .span-12 {
.span-4 {
    width: 33.33% !important;
    float: left !important;
}
.span-4 * {
    font-size: 20px !important;
}
}
}

 

Wow, I've been trying to figure this out for so long. Thank you so much!!!

Link to comment
  • 0
On 1/17/2021 at 12:46 AM, danamichellecastro said:

Trying to do the same thing with mine @tuanphan https://www.threecrownsstudio.com/

 

Untitled.png

Add to Design > Custom CSS

/* services side by side */
@media screen and (max-width:767px) {
div#page-section-5fc481be9b1ed035386d54af>.row>.span-4 {
    width: 33.33% !important;
    float: left !important;
}
div#page-section-5fc481be9b1ed035386d54af>.row>.span-4 * {
    font-size: 12px;
}
}

 

Link to comment
  • 0
On 1/19/2021 at 12:11 AM, LJM said:

Add to Design > Custom CSS

/* Home 3 images mobile */
@media screen and (max-width:767px) {
body.homepage .gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
}

 

Link to comment
  • 0

@tuanphan Hi, would really appreciate it if you can help me solve this problem. 

 

On https://betterbelocal.com/regina-restaurants I have the Logo with Name below I currently have 4 logos across on desktop view. I would like to have 2 across on mobile view but currently its just stacking it which makes for loads of scrolling 1 business at a time. Anyway you can fix this please? Thank you very much

Edited by betterbelocal
link
Link to comment
  • 0
18 hours ago, consultant9987 said:

Hi @tuanphan I have treid using a few of the above snippets.  I have used blocks with images and text that again on mobile stack.  I was hoping to get these into a two column format.  Any suggestions welcome.  Thank you

https://www.roostconsulting.co.uk/marketing

image.thumb.png.76c1ad62a4d8dbcea633e8c00f395be0.png

Add to Design > Custom CSS

/* Mobile 2 columns */
@media screen and (max-width:767px) {
div#block-8eb59604da7af8a7a546+.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-8eb59604da7af8a7a546+.row>.span-4 .span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-8eb59604da7af8a7a546+.row>.span-4 {
    clear: left !important;
}
}

 

Link to comment
  • 0
5 hours ago, betterbelocal said:

@tuanphan Hi, would really appreciate it if you can help me solve this problem. 

 

On https://betterbelocal.com/businesses-go-here I have the Logo with Name below I currently have 4 logos across on desktop view. I would like to have 2 across on mobile view but currently its just stacking it which makes for loads of scrolling 1 business at a time. Anyway you can fix this please? Thank you very much

The url doesn't exist.

Link to comment
  • 0
2 minutes ago, betterbelocal said:

@tuanphan Hi, sorry I just fixed it.

Add to Design > Custom CSS

/* Mobile 2 columns */
@media screen and (max-width:767px) {
div#page-section-600a5cd71c7fb14b24242b3b .span-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
}

 

Link to comment
  • 0

@tuanphan Thank you! But how can I do this across on all pages? I just entered the code you gave me and the first couple are side by side but then it goes to one again. Do you know how I can fix this? Thanks again!

https://betterbelocal.com/regina-restaurants

https://betterbelocal.com/regina-household-decor

I have around 150 pages like this, can you tell me what exactly I have to insert for each page? And how to replicate it across all of them.

* In each link I have multiple sections, so I am assuming I have to put in some different code for each section? Or is there one single code injection I can put into Custom CSS that will convert all the pages to 2 columns on mobile?

Edited by betterbelocal
Link to comment
  • 0

@tuanphan would you be able to help me? I tried using some of the code from above but it's not working on my page. 

I would love to have my mobile gallery grid display 3 columns of pictures instead of 2. On desktop it displays 3 like how I would like..but it adjusts for mobile automatically. 

Thank you! 

 

https://www.jasonherkert.com/gallery

Pass: jason2021

 

Screen Shot 2021-02-03 at 12.34.57 AM.png

IMG_2764.PNG

Link to comment
  • 0
On 2/3/2021 at 3:37 PM, teesaurus said:

@tuanphan would you be able to help me? I tried using some of the code from above but it's not working on my page. 

I would love to have my mobile gallery grid display 3 columns of pictures instead of 2. On desktop it displays 3 like how I would like..but it adjusts for mobile automatically. 

Thank you! 

 

https://www.jasonherkert.com/gallery

Pass: jason2021

 

Screen Shot 2021-02-03 at 12.34.57 AM.png

IMG_2764.PNG

Add to Design > Custom CSS

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

 

Link to comment
  • 0

@tuanphan wow, so glad I stumbled across this! I've been trying to figure out how to do this with mine as well! Tried using some of the code above, but wasn't able to get it to work. I already have some other custom code in there so I wasn't sure if I just start on a new line after a closing "}"? 

Basically would love my site to display a few images side-by-side (or whatever fits to make the grid) kinda like on a desktop. But the mobile version of squarespace just automatically stacks them.

https://www.rebeccastumpf.com/

THANKS!

Kindly,

Rebecca 

Edited by rebeccastumpf
clarification
Link to comment
  • 0

@tuanphan I am having this issue as well with these three icons. Is there a better layout option that I am missing? I would greatly appreciate any assistance with getting these icons to stay side by side! 

www.mellocontracting.com

 

Thank you! 
Hannah1910083942_ScreenShot2021-03-19at8_48_15AM.thumb.png.64403b3d04c25286286bb16562e053df.png

Link to comment
  • 0
On 3/11/2021 at 5:13 AM, TaylorAlders said:

@tuanphan The photos stack in MOBILE version - initial post was a typo. Is there a way to make them stay side by side in mobile version? (like the desktop version)

Hi. Can you share link to page where you have problem? We can help easier

On 3/19/2021 at 7:50 PM, HannahLuiz said:

@tuanphan I am having this issue as well with these three icons. Is there a better layout option that I am missing? I would greatly appreciate any assistance with getting these icons to stay side by side! 

www.mellocontracting.com

 

Thank you! 
Hannah1910083942_ScreenShot2021-03-19at8_48_15AM.thumb.png.64403b3d04c25286286bb16562e053df.png

Add to Design > Custom CSS

/* mobile icons side by side */
@media screen and (max-width:767px) {
div#block-283160ed342d16308b2e+.row .span-2 {
    width: 33.33% !important;
    float: left !important;
}
div#block-283160ed342d16308b2e+.row .span-2 * {
    font-size: 14px;
}
}

 

Link to comment
  • 0
On 1/18/2021 at 7:13 AM, tuanphan said:

Hi! 

I'm looking to do the same for my homepage: 

www.machinevisionbar.com 

I would like the 4 logos below to appear into 2 column on mobile view: 

image.thumb.png.1b1c8341ffc0e7a86afaced5ba3566bd.png

As well as those ones: 

image.thumb.png.188c4bac9e519ea39706bba1590226ce.pngWould you be able to help ? 

 

thank you very much, 

 

Marianne 

Link to comment
  • 0
On 3/22/2021 at 6:36 PM, TPLvision-2021 said:

Hi! 

I'm looking to do the same for my homepage: 

www.machinevisionbar.com 

I would like the 4 logos below to appear into 2 column on mobile view: 

image.thumb.png.1b1c8341ffc0e7a86afaced5ba3566bd.png

As well as those ones: 

image.thumb.png.188c4bac9e519ea39706bba1590226ce.pngWould you be able to help ? 

 

thank you very much, 

 

Marianne 

Add to Design > Custom CSS

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

 

Link to comment
  • 0
On 3/24/2021 at 1:03 PM, tuanphan said:

Add to Design > Custom CSS


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

 

you are the best ! thank you so much for your help 

Link to comment
  • 0
On 3/25/2021 at 10:00 PM, TPLvision-2021 said:

you are the best ! thank you so much for your help 

Hi. Tablet looks small. Do you want to change to 2 items/row?

image.thumb.png.42db6e055bd130dfe217302f6679a9b3.png

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