Resize Video for mobile view

Site URL: http://Scrambledapparel.com

I have had trouble resizing the video on my home page to fit in mobile view. I've used some css from another video to resize the images for mobile view but I've had no luck finding code to resize my video.

On 2/24/2022 at 2:20 AM, SethF said:

Site URL: http://Scrambledapparel.com

I have had trouble resizing the video on my home page to fit in mobile view. I've used some css from another video to resize the images for mobile view but I've had no luck finding code to resize my video.

Add to Design > Custom CSS

/* Mobile resize home video */
@media screen and (max-width:767px) {
[data-section-id="61a7e28062079629f1554acd"] video {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
[data-section-id="61a7e28062079629f1554acd"] {
    min-height: unset !important;
    height: 30vh;
}
}

Hi @tuanphan - I'm also having trouble with my videos appearing full width in mobile view. 

I have resized them on the desktop version to be 90% of fullscreen, however, on mobile it would be better if they would be larger. I have used the media query to limit my code to desktop which helps. But you can see in the image below that the "You might also like" videos are showing wider than the video above it (Pink one). It would be better if the video could be the same width as the "You Might Also Like" videos. 

Any help would be much appreciated! Thank you!

On 5/3/2023 at 9:41 PM, ScoutMedia said:

Hi @tuanphan - I'm also having trouble with my videos appearing full width in mobile view. 

I have resized them on the desktop version to be 90% of fullscreen, however, on mobile it would be better if they would be larger. I have used the media query to limit my code to desktop which helps. But you can see in the image below that the "You might also like" videos are showing wider than the video above it (Pink one). It would be better if the video could be the same width as the "You Might Also Like" videos. 

Any help would be much appreciated! Thank you!

Can you share link to this page?

Here is the website:

https://mandarin-poodle-dg32.squarespace.com/

PW: website

See Work>>Film>>select any project and see mobile display

Many thanks!

On 5/8/2023 at 9:04 PM, ScoutMedia said:

Here is the website:

https://mandarin-poodle-dg32.squarespace.com/

PW: website

See Work>>Film>>select any project and see mobile display

 

Many thanks!

 

Password incorrect. Can you check it again?

Sorry about that! Should work now:

https://mandarin-poodle-dg32.squarespace.com/

PW: website

On 5/8/2023 at 9:04 PM, ScoutMedia said:

Here is the website:

https://mandarin-poodle-dg32.squarespace.com/

PW: website

See Work>>Film>>select any project and see mobile display

 

Many thanks!

 

It looks like you removed You might also like section. I don't see it now

https://mandarin-poodle-dg32.squarespace.com/film/v/2023-showreel

Yes, I don't actually want the "You might also like" section to appear. But I would like the main video to be as wide as the "you might also like" videos appear. Or full width of the mobile screen. It will be easier for the user to press play/pause if the video were larger.

Many thanks in advance! 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.lesson-details {
    margin-left: 2px !important;
    margin-right: 2px !important;
}
}

Wonderful! Thank you!!!! Is there anything I can do to address the spacing/alignment of the description and pagination? The pagination in particular is crowding very close to the description and does not align with the description. 

Many thanks @tuanphan!

Quote

 

Add this code under

@media screen and (max-width:767px) {
section.lesson-item-pagination.lesson-item-pagination--prev-next {
    margin-top: 30px;
    padding-left: 0;
    padding-right: 0;
}
}