Fixed height and width only for desktop

82
June 15, 2018, at 8:20 PM

I am trying to implement a Vimeo video however for it to show correctly on mobile etc I have to have it in the responsive share mode however on desktop/notebook etc we want to have it a fixed height and width- how can I do this?

Responsive Code:

<div class="align-center" style="margin-bottom:20px;"> // My own div
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="#" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<br/>
<a href="#" class="align-center btn btn-mod btn-large btn-color">Learn More</a>
</div>
Answer 1
@media (min-width: 000px) { .class {
    ...
    ...
    ...
  }
}

Replace 000 with any size viewport. For example, setting it to 992px would account for most desktop screens and will "adapt" the new CSS rules you chose to include to whatever class you add when the viewport meets the minimum width of whatever you chose.

... for any features you want to have your class include. (height:, width:, etc.)

READ ALSO
Iframe, maintain original css inside it

Iframe, maintain original css inside it

I have the following situationI've a html page with some graphs on it

74
Using mixins in material-ui to customize components in React

Using mixins in material-ui to customize components in React

I am trying to customize a textfield component in Material-ui with React

151
Fixed position footer moving in mobile Chrome

Fixed position footer moving in mobile Chrome

I have a position:fixed footer on a huge form that has been moving after opening the keyboard and scrolling a bitIt happens because the address bar shows/hides, and the footer moves the same height as the address bar, going up and down

123
Horizontally scroll a list within flexbox a layout with set-width sidebar

Horizontally scroll a list within flexbox a layout with set-width sidebar

I have a two-column layout with a tabbed UI in the main section and a sidebar attached to the right-sideOn larger screens, the width of the main column is fluid while the width of the sidebar should be set

73