Unable to get videos to move below text when screen minimized or on mobile

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!

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?

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!

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!

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;
}
}

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!

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;
}
}