Streaming live at 10am (PST)

Custom css media query not working

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)

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

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

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