Jump to content

Need help on a couple of things (home page video scaling and desktop / mobile variations)

Recommended Posts

Hey guys,

I am building out a new site and am hoping someone on here can help me with a couple of things...

 

1)
 
I am hoping to have a 16X9 video play on desktop and a 9X16 video play on mobile. It's the same video, but when it auto-resizes to mobile aspect ratio, the given frames are not what I would pick.
 
See this example. NEW 9X16 recut, Desktop, The Auto re-size.
 
Screenshot 2024-06-14 at 2.11.04 PM.png
 
Apparently, you can upload 2 videos for home page. One plays on desktop, the other on mobile. By 'hiding' one in any given scenario.
 
 
Here is a forum where people say it's doable - AND the code to embed I believe - I just cant figure it out.
 
2)
 
A friend made the background video full-bleed ? Well, you'll see on desktop that you have to scroll down a little to see it all... what I really want it to do is move and re-scale perfectly as you grab and move the corner of the screen. Like this. Possible ?
 
3) I like how in my galleries, there are images in rows of three. But when it goes to mobile there are 2X2. I'd like that to be 1X1 - basically just one on top of the other. 
 
Screenshot2024-07-06at11_39_41AM.thumb.png.ebdff6bbcd3ea9531f62e3444eb30549.pngScreenshot2024-07-06at11_39_48AM.thumb.png.35273936b885ff820861c7c5106f203d.png
 
THANK YOU SO MUCH. Happy to make a dontation to someone somewhere if needed.
Adam
 
Link to comment
4 hours ago, adamwarmington said:

Hey guys,

I am building out a new site and am hoping someone on here can help me with a couple of things...

 

1)
 
I am hoping to have a 16X9 video play on desktop and a 9X16 video play on mobile. It's the same video, but when it auto-resizes to mobile aspect ratio, the given frames are not what I would pick.
 
See this example. NEW 9X16 recut, Desktop, The Auto re-size.
 
Screenshot 2024-06-14 at 2.11.04 PM.png
 
Apparently, you can upload 2 videos for home page. One plays on desktop, the other on mobile. By 'hiding' one in any given scenario.
 
 
Here is a forum where people say it's doable - AND the code to embed I believe - I just cant figure it out.
 
2)
 
A friend made the background video full-bleed ? Well, you'll see on desktop that you have to scroll down a little to see it all... what I really want it to do is move and re-scale perfectly as you grab and move the corner of the screen. Like this. Possible ?
 
3) I like how in my galleries, there are images in rows of three. But when it goes to mobile there are 2X2. I'd like that to be 1X1 - basically just one on top of the other. 
 
Screenshot2024-07-06at11_39_41AM.thumb.png.ebdff6bbcd3ea9531f62e3444eb30549.pngScreenshot2024-07-06at11_39_48AM.thumb.png.35273936b885ff820861c7c5106f203d.png
 
THANK YOU SO MUCH. Happy to make a dontation to someone somewhere if needed.
Adam
 

It is easier for us to check to share the right solution for your issues if you can share your URL here

 Press 👍  or mark my comment as solution if you find my sharing usefull

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment
Posted (edited)

1. On home page, i can see only one video, not two ones as you mentioned

2. For full bleed on destop, you can try the following custom css

@media only screen and (min-width: 768px) {
  #collection-66639651fd8222666000a92d .page-section {
    padding-top: 0 !important;
    height:  100vh;
  }
  #collection-66639651fd8222666000a92d .content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #collection-66639651fd8222666000a92d {
  	overflow: hidden;
  }
}

3. It looks like you 've figured it out, right? I check that it has one column now on project page

image.png

Edited by HoaLT
update to remove the space in desktop view

 Press 👍  or mark my comment as solution if you find my sharing usefull

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment
1 hour ago, HoaLT said:

1. On home page, i can see only one video, not two ones as you mentioned

2. For full bleed on destop, you can try the following custom css

@media only screen and (min-width: 768px) {
  #collection-66639651fd8222666000a92d .page-section {
    padding-top: 0 !important;
    height:  100vh;
  }
  #collection-66639651fd8222666000a92d .content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

3. It looks like you 've figured it out, right? I check that it has one column now on project page

 

image.png

Hey there

1) I haven't uploaded a second video. I did, but couldn't get it to work. It's in the link above. Happy to re-upload, but not sure im doing that right either.

 

2) thanks ill try

3) The project gallery is 1X1 but when i click into the actual gallery it's 2X2. I want it to be 3X3 on desktop (which it is), but then when it goes to mobile, for it to be 1X1 (see attached)

 

Screenshot2024-07-08at4_16_51PM.thumb.png.28452af390173f8bb979d89a675942f5.pngScreenshot2024-07-08at4_17_03PM.thumb.png.e9ab7c5b3085ec366093fb0717dd2154.png

 

Link to comment
Posted (edited)
9 minutes ago, adamwarmington said:

Hey there

1) I haven't uploaded a second video. I did, but couldn't get it to work. It's in the link above. Happy to re-upload, but not sure im doing that right either.

 

2) thanks ill try

3) The project gallery is 1X1 but when i click into the actual gallery it's 2X2. I want it to be 3X3 on desktop (which it is), but then when it goes to mobile, for it to be 1X1 (see attached)

 

Screenshot2024-07-08at4_16_51PM.thumb.png.28452af390173f8bb979d89a675942f5.pngScreenshot2024-07-08at4_17_03PM.thumb.png.e9ab7c5b3085ec366093fb0717dd2154.png

 

Do you mean making this part  one column only?

image.png.dcff18ce758e20f5ca1a4e97ed74a15e.png

Edited by HoaLT

 Press 👍  or mark my comment as solution if you find my sharing usefull

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment
Just now, HoaLT said:

Do you mean making this part  one column only?

I mean once you click into each gallery section you only see one photo on top of eachother in mobile. Staying 3 in a row on desktop.

 

Also - I tried the CSS for full bleed. it almost worked, but theres still a little up/down scroll that leaves a little white line at the bottom. Still havent solved the mobile thing

 

THANKS

Link to comment
6 minutes ago, adamwarmington said:

I mean once you click into each gallery section you only see one photo on top of eachother in mobile. Staying 3 in a row on desktop.

 

Also - I tried the CSS for full bleed. it almost worked, but theres still a little up/down scroll that leaves a little white line at the bottom. Still havent solved the mobile thing

 

THANKS

Everything looks perfect in desktop. I just want galleries to be one photo on top of another in mobile

Link to comment
Posted (edited)

Try the following code to make one column on mobile view

@media only screen and (max-width: 767px) {
  body[id*="item"]  .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: 1fr !important;
  }
}

My testing

image.png.f98d73b70a25ac562d43ddc991a7decd.png

Edited by HoaLT

 Press 👍  or mark my comment as solution if you find my sharing usefull

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment
4 minutes ago, HoaLT said:

Try the following code to make one column on mobile view

@media only screen and (max-width: 767px) {
  body[id*="item"]  .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: 1fr !important;
  }
}

My testing

image.png.f98d73b70a25ac562d43ddc991a7decd.png

My man !

Any solve for the home page issue ?

Link to comment
2 minutes ago, HoaLT said:

on my end, it looks full bleed now, can you show your current state?

image.thumb.png.ebc56d5104f434da6f0a022d8aa16824.png

Its close but when you scale to odd sizes, theres a white bar at the bottom. Also still looking for that solution where a seperate video plays for mobile. Thoughts ?

image.thumb.png.40d76f602002ef5fe511e98e5a5fd38e.png

 

Link to comment

NM I THINK I figured it out 🙂

Used this:

/* Homepage - Show First Section on Desktop */

@media screen and (min-width:768px) {

/* this code will hide second section */

body.homepage article section:nth-child(2) {

display: none;

}

}

/* Homepage - Show Second Section on Mobile */

@media screen and (max-width:767px) {

/* this code will hide first section */

body.homepage article section:nth-child(1) {

display: none;

}

}

 

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.