Dawn Theme, Homepage, Video section, Height is too large

Store Design
, , ,
1

Hi,

How can I make the video on my homepage, Video section appear smaller as currently it appears very large. On my mobile phone it appears perfect. I have added a screenshot of the video looking very large on my desktop. Dawn Theme is used.

Thank you in advance.

Screenshot 2023-10-18 at 02.00.28.png
Screenshot 2023-10-18 at 02.00.28.png1283×768 96.1 KB

2

Hi @RuStar

Please share your store URL

3

@RuStar - can you please share this page link?

4

ourein.com

5

Hi @RuStar

Please add this CSS code to Custom CSS of that section to make it appear same as mobile

.media>img { object-fit: contain !important; }

Screenshot 2023-10-19 at 08.37.23.png
Screenshot 2023-10-19 at 08.37.23.png1233×790 77.9 KB

6

@RuStar - add this css to the very end of your base.css file and check

@media screen and (min-width: 750px){
.video-section{max-width: 50%; margin: 0 auto;}
}
7

Good Morning,

I think I’ve copied and pasted so many scripts that I don’t know which section to edit. My video plays fine on my mobile phone but the desktop version is showing way too big in width and height. I have copied the above script to assets/base.css of theme.liquid. Should I also paste it to assets/video-section.css?

8

@HER_1 - no base.css is enough, can you please share your website link?

9

sorry. I thought i had supplied it. My website is www.brickle.co

However. I think I have fixed it by inserting this code into the base.css
I am now playing with the % to get it as large as I can whilst still appearing on 11.5 inch laptop screens.

Is this good code to use? Is there a better fix?

@media screen and (min-width: 750px){
.video-section{max-width: 50%; margin: 0 auto;}
}

10

@Brickle.co his code will reduce width of the video, and hence there can be some space around video , but you can use this code, just check what classes you have on your page