Width of 3 videos in a row the same as collection list

Store Design
, ,
1

Hi. I am new to coding and I have inserted the below code into custom liquid on the home page

I have add the following code to base.css

/* any screen equal to or wider than 750px */
@media only screen and (min-width: 750px) {
video {
max-width: 30% !important;
}
}
/mobile - small tablets/
video {
width: 91.5%;
}

So The videos are 3 in a row on a desktop and 1 per row on a mobile.

Please see url: https://thedeliciousdogfoodcompany.co.uk

Is there any way to make the videos the same width as the collection list, or is there any better coding to use. As this coding affects all videos on the website and I would like some individual videos to be larger than 30% if Possible. Any help would be much appreciated. Thank you

1 Like
2

hi @TDDFC , Instead of css directly into the tag name. You can add attribute id or unique class to your tags and css them via this id class.which will not affect other tags in the website
Example:

...

And when css, you should CSS by tier as in the example below /* css only tag video in p have id */ #id-unique-tag-p video { max-width: 30% !important; } /* css for tag video have id */ #id- unique -tag-video { Width: 60% !important; } With CSS like that, you can customize the CSS for each child element that is in the parent element. You can read through them in the [https://www.w3schools.com/css/css_selectors.asp](https://www.w3schools.com/css/css_selectors.asp) documentation to understand it better Hope the above explanation helps you
3

@TDDFC

Try this code

Try this css code

/* any screen equal to or wider than 750px */
@media only screen and (min-width: 750px) {
video {
max-width: 33% !important;
}
}

@media only screen and (max-width: 749px) {
/*mobile - small tablets*/
video {
width: 100% !important;
}
}
4

Thanks!

How would I make the collection list the same width please?

5

Hi. Thanks for the reply. I don’t understand what you mean. Would you be kind enough to give me an example?