Help ! crop images on mobile and optimization

Site URL: https://www.cesardumayhouard.com/

Good evening everyone, I've just launched my website after a few days of prep, but there are three things that I don't like on the phone version, and from what I've search I believe the only way to solve them is by using CSS.

Except I'm completely incapable of writing code myself, so a bit of help would be very much appreciated.

The first and most important thing to improved is the background video on my home page. It's a 4K source spanning the full width of the page. Unfortunately on smartphone it is heavily cropped, and I need this video to be in the correct ratio to full width (16/9). I know it will be way smaller on smartphone, but this is my cinematography portfolio, so I really don't want any crop on this one.

This problem is also present on my "about" page (à propos), on the bottom of my contact info, this picture is cropped as well, I would like it to be as close as the web version.

The last thing is the scrolling menu. When you tap on the scrolling bar for web pages, it switches to an eye shattering blinding all white background with black text... Yeah you probably guested it, could it be all black/or grey background with white text ? Please...

Thank you very much if you can help me with those issues, I have a different question also, but I'll post it in a different topic.

Any one can help me ? I really need a solution before I can share my site.

@Jeyycie : Hello Jeyycie!  Personally, I love the crop on mobile for both the background video and the background images.  I wouldn't change a thing but I understand your request.  I believe the code below will make your video go full-width.  The media query makes it so it only works on devices smaller than 640px which is most mobile devices.  Most tablet devices will look show your desktop version.

If you want to adjust the veritical position of the video, you can tweak the top % which will move it down from the top.

The downside of making your background video and images full width of a mobile device is that I believe the user cannot go fullscreen to see your full video and image so they will see a much smaller version of your background video.  That is why I recommend sticking with the crop but that's just my humble opinion.

If you were to choose to use the video or image blocks instead, the lightbox feature would allow the user to expand the video and image to see more detail.

@media only screen and (max-width: 640px) {
   .section-background .video-player .plyr {
      position: relative !important;
      top: X% !important;}}

@media only screen and (max-width: 640px) {
   .section-background img {
      object-fit: contain !important;}}

I hope this helps or sparks an idea! 😊

@SHADOWNUT Thank very much for this code, and after testing it I see the issue now.

My main concern was the top video on the home page, I like that borderless full screen look you get on the web version, but I don't like how crop it is on mobile. As cinematographer we deliberately choose a specific framing, so cropping the image like that is like tearing apart a painting.

But because I don't have a premium account, and I can't separate pages for CSS code, therefore it affects all images that are full screen, messing up the background. Furthermore, I leaves a very wide gap in the layout because of the outline I chose.

So after seeing all that, it brought me to tolerate the crop, even though I'm not a fan of it. (It looks way better when you flip your phone horizontally though.)

Now, as a last request, do you know if it is possible to change that scrolling page, to a black or grey background when you click it, with white text, and not that blinding all white background ?

(with CSS code I guess)

Thank you very much.

On 4/22/2022 at 9:57 AM, Jeyycie said:

Now, as a last request, do you know if it is possible to change that scrolling page, to a black or grey background when you click it, with white text, and not that blinding all white background ?

@Jeyycie : Hello Jeyycie!  Where is the 'scrolling page' you are referring to?  Can you send a url?  I am not seeing a page with an all white background.

@SHADOWNUT It's only on the smartphone version. When you tap on the top right corner of the page, it then shows you which page to go to, and that is displayed on a blinding white background with black text, I want to know if you can have it the other way around.

Oh my god, I feel so stupid that I didn't noticed the top icon on the page header... Thank you @SHADOWNUT

23 hours ago, Jeyycie said:

Oh my god, I feel so stupid that I didn't noticed the top icon on the page header... Thank you @SHADOWNUT

@Jeyycie : Hello Jeyycie!  No worries at all.  It happens to the best of us.

I hope the launch of your website exceeds your expectations! 😃

If you need any future web development support, feel free to reach out via https://shadownut.com.  We offer a Maintenance package that includes monthly website testing to ensure everything is working as expected.  Results of the testing are delivered via a personalized monthly newsletter which also informs you of the latest Squarespace updates that could help elevate your site.