Nevin Posted November 4, 2021 Share Posted November 4, 2021 Site URL: https://www.jonasnevin.com/portfolio/atlas-coffee Hi there, I've got 2 related issues that I kindly need your help solving. 1. Currently, my page seems fine (video size is fine and video is aligned with text) when viewed in full screen or on desktop. But once it is minimized or if viewed on mobile, the video reduces significantly in size, making it not viewable. Rather is there a way to move the video to the bottom of the text instead of being at the side once the screen size reduces? 2. The page contains 2 videos. In section 1, video is to the right while in section 2, the video is to the left. When the window size is reduced, is there a way to move the videos only to the bottom of the text regardless of their orientation? Thank you! Link to comment
tuanphan Posted November 7, 2021 Share Posted November 7, 2021 On 11/4/2021 at 2:50 PM, Nevin said: Site URL: https://www.jonasnevin.com/portfolio/atlas-coffee Hi there, I've got 2 related issues that I kindly need your help solving. 1. Currently, my page seems fine (video size is fine and video is aligned with text) when viewed in full screen or on desktop. But once it is minimized or if viewed on mobile, the video reduces significantly in size, making it not viewable. Rather is there a way to move the video to the bottom of the text instead of being at the side once the screen size reduces? 2. The page contains 2 videos. In section 1, video is to the right while in section 2, the video is to the left. When the window size is reduced, is there a way to move the videos only to the bottom of the text regardless of their orientation? Thank you! Hi, #1. Which screen size you want this? or for Tablet + Mobile only? #2. Mobile only? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Nevin Posted November 13, 2021 Author Share Posted November 13, 2021 Hello, #1 Tablet+Mobile would be great. #2 If possible, Tablet+mobile too will be great but otherwise, Mobile alone should be fine. Thank you! Link to comment
Nevin Posted November 13, 2021 Author Share Posted November 13, 2021 11 hours ago, Nevin said: Hello, #1 Tablet+Mobile would be great. #2 If possible, Tablet+mobile too will be great but otherwise, Mobile alone should be fine. Thank you! Hello,#1 Tablet+Mobile would be great.#2 If possible, Tablet+mobile too will be great but otherwise, Mobile alone should be fine.Thank you! Link to comment
tuanphan Posted November 15, 2021 Share Posted November 15, 2021 On 11/13/2021 at 9:27 AM, Nevin said: Hello, #1 Tablet+Mobile would be great. #2 If possible, Tablet+mobile too will be great but otherwise, Mobile alone should be fine. Thank you! Add to Design > Custom CSS /* Atlas Coffee videos */ @media screen and (max-width:991px) { div#page-section-617c1b039fbbfa0ff42a7eb3>.row { display: flex; flex-direction: column; } div#page-section-617f9e648945ed322424c1f4>.row { display: flex; flex-direction: column-reverse; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Nevin Posted November 15, 2021 Author Share Posted November 15, 2021 2 hours ago, tuanphan said: Add to Design > Custom CSS /* Atlas Coffee videos */ @media screen and (max-width:991px) { div#page-section-617c1b039fbbfa0ff42a7eb3>.row { display: flex; flex-direction: column; } div#page-section-617f9e648945ed322424c1f4>.row { display: flex; flex-direction: column-reverse; } } It works. Thank you. I've applied to the other pages but am now facing 2 issues I hope I can get your help with. 1. When viewed on mobile, the videos on this page (https://www.jonasnevin.com/portfolio/foxtan) are of different sizes. Is there any way to edit the code so that the videos are in the same proportions like if they were viewed on desktop? 2. For some reason, the video on this page is not centered when viewed on desktop. https://www.jonasnevin.com/portfolio/not-a-model Could I please ask if there is any way to fix this? Thank you! Link to comment
tuanphan Posted November 18, 2021 Share Posted November 18, 2021 Try this new code /* Atlas Coffee videos */ @media screen and (max-width:991px) and (min-width:768px) { div#page-section-617c1b039fbbfa0ff42a7eb3>.row { display: flex; flex-direction: column; } div#page-section-617f9e648945ed322424c1f4>.row { display: flex; flex-direction: column-reverse; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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