A user encountered an issue where videos in a multi-column section on their Shopify store appeared cropped. Two solutions were proposed:
Solution 1 (Asad-Mahmood):
base.css file directlyobject-fit: contain and responsive sizingSolution 2 (tim_1 - Recommended):
object-fit: contain to all multicolumn videosImportant consideration: One contributor noted that while the CSS fixes prevent cropping, the uncropped result may not look visually appealing (screenshot provided). They suggested the current cropped appearance might actually be preferable from a design perspective.
The discussion remains open regarding which approach—fixing the cropping or accepting the current layout—produces better visual results.
You can easily avoid cropping, by adding this code to the “Custom CSS” setting of this section:
[class*=multicolumns] video {
object-fit: contain;
}
Do not edit theme code – this will make future theme updates complex.
But this will not look great:
In my opinion they look pretty good the way they are now…
