adamwarmington Posted July 6 Share Posted July 6 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. 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 the mobile verison as a vimeo link Here is the mobile version as a file 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. THANK YOU SO MUCH. Happy to make a dontation to someone somewhere if needed. Adam Link to comment
HoaLT Posted July 6 Share Posted July 6 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. 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 the mobile verison as a vimeo link Here is the mobile version as a file 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. 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 adamwarmington 1 Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) 📑 Squarespace embed PDF popup (affiliate link) Link to comment
adamwarmington Posted July 7 Author Share Posted July 7 23 hours ago, HoaLT said: It is easier for us to check to share the right solution for your issues if you can share your URL here https://paddlefish-dodecahedron-rhxb.squarespace.com/ HoaLT 1 Link to comment
HoaLT Posted July 8 Share Posted July 8 (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 Edited July 9 by HoaLT update to remove the space in desktop view Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) 📑 Squarespace embed PDF popup (affiliate link) Link to comment
adamwarmington Posted July 8 Author Share Posted July 8 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 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) Link to comment
HoaLT Posted July 8 Share Posted July 8 (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) Do you mean making this part one column only? Edited July 8 by HoaLT Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) 📑 Squarespace embed PDF popup (affiliate link) Link to comment
adamwarmington Posted July 8 Author Share Posted July 8 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
adamwarmington Posted July 8 Author Share Posted July 8 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
HoaLT Posted July 8 Share Posted July 8 (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 Edited July 8 by HoaLT Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) 📑 Squarespace embed PDF popup (affiliate link) Link to comment
adamwarmington Posted July 8 Author Share Posted July 8 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 My man ! Any solve for the home page issue ? Link to comment
HoaLT Posted July 8 Share Posted July 8 (edited) 3 minutes ago, adamwarmington said: My man ! Any solve for the home page issue ? on my end, it looks full bleed now, can you show your current state? Edited July 8 by HoaLT Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) 📑 Squarespace embed PDF popup (affiliate link) Link to comment
adamwarmington Posted July 8 Author Share Posted July 8 2 minutes ago, HoaLT said: on my end, it looks full bleed now, can you show your current state? 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 ? Link to comment
adamwarmington Posted July 8 Author Share Posted July 8 See this https://www.aoifemcardle.com/ A Link to comment
HoaLT Posted July 9 Share Posted July 9 I 've just updated the code in this post Try it again and let me know how it works Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) 📑 Squarespace embed PDF popup (affiliate link) Link to comment
adamwarmington Posted July 10 Author Share Posted July 10 On 7/9/2024 at 8:24 AM, HoaLT said: I 've just updated the code in this post Try it again and let me know how it works It worked (for desktop) - perfect. Thanks. Last thing I need to figure out is to play THIS video for full bleed on mobile. Here is the mobile verison as a vimeo link Here is the mobile version as a file Link to comment
adamwarmington Posted July 11 Author Share Posted July 11 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment