Custom css media query not working

Design help General
1

Hello

It seems to be that media query or custom CSS on the image does not work. The className for the video is .videoBlueberry

<style>
/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
  div#videoBlueberry.videoBlueberry{
    position: absolute!important;
    margin-top: 50em !important;
   }
  
}

/* Portrait */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
    div#videoBlueberry.videoBlueberry{
   position: absolute !important;
   margin-top: 50em !important;
   }
}

/* Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
      div#videoBlueberry.videoBlueberry{
   position: absolute !important;
   margin-top: 50em !important;
   }
}

</style>

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Class names are rendered by Webflow as lower case on publish.

3

Your shared link has no link on it.

And just to add what @webdev already clarified; all class names will convert to lower case and if you have space then it will convert to dash(-).

For example
videoBlueberry will be videoblueberry
Video Blueberry will be video-blueberry

4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.