Jump to content

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

Recommended Posts

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
  • Replies 6
  • Views 369
  • Created
  • Last Reply

Top Posters In This Topic

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

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

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.