I'm stuck with attempts to make embedded youtube videos list responsive.
Each video should be with max-width let's say 300px.
If window size is less, than video should shrink.
If window size is big, than videos should get in rows.
Problem with current code is that max video height don't want to be as specified in Preview - max-height: 500px.
Any ideas?
Codesandbox example.
This looks like a good use case for a CSS grid with auto-fill. Here's an example in which boxes of 300px wide wrap. You can adapt that to your specific needs.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.boxes {
display: grid;
grid-template-columns: repeat(auto-fill, 300px));
}
.box {
height: 100px;
}
</style>
</head>
<body>
<div class="boxes">
<div style="background-color: red;" class="box"></div>
<div style="background-color: blue;" class="box"></div>
<div style="background-color: pink;" class="box"></div>
<div style="background-color: green;" class="box"></div>
<div style="background-color: black;" class="box"></div>
</div>
</body>
</html>
For scaling videos in CSS, particularly iframe elements within divs, I use the old padding ratio / relative:absolute positioning trick.
I've got a gist here if you want to use it (with optional JS for detecting ratio):
https://gist.github.com/robertpauldev/cad3ccaed608692f495707b9eebbf70c
If you don't want to use the JS, you can hard-code your own ratio, e.g. 16:9 ( height / width * 100 ).
A uniform 16:9 video ratio would therefore be achieved with .video-wrap { padding-bottom: 56.25%; }
That would get the scaled videos sitting more flush with one another, particularly in CSS Grid setup.
I was able to solve this partially with #media:
const Preview = styled.div`
iframe {
width: 100%;
height: 100%;
}
`
#media screen and (max-width: 300px) {
.games-list div {
height: 200px;
width: 200px;
}
}
#media screen and (min-width: 300px) {
.games-list div {
height: 300px;
width: 300px;
}
}
#media screen and (min-width: 400px) {
.games-list div {
height: 400px;
width: 400px;
}
}
#media screen and (min-width: 500px) {
.games-list div {
height: 500px;
width: 500px;
}
}
Related
I am using Twitter Bootstrap's img-responsive class.
I have an image (1920x1200) that looks too big, in terms of height, on a lg screen and correct on an xs screen.
If I cut the height of the image, it looks correct on a lg screen, but way too small on an xs screen.
I tried setting the image's max-height, but it also changes the width, resulting in gray space on either side of the image.
How can I make a large image respond nicely on all screen sizes?
<div class="container-fluid text-center">
<div class="row hero-image-container vertical-align">
<img src="../../static/images/house.jpg" class="img-responsive">
<h1 class="hero-image-address">
<i class="hero-location-icon ion-ios-location" ariahidden="true"></i> Address Here
</h1>
<div class="hero-image-after"></div>
</div>
</div>
Yasin's answer looks quite practical.
Add media queries to make the image container's height look good in various common viewport size, like so:
.imageContainer{
max-height: 600px;
overflow: hidden;
}
/* common tablet portrait */
#media (min-width: 768px) {
.imageContainer{ max-height: 800px; }
}
/* common tablet landscape */
#media (min-width: 1024px) {
.imageContainer{ max-height: 900px; }
}
/* common 15" notebook */
#media (min-width: 1400px) {
.imageContainer{ max-height: 1000px; }
}
<div class="imageContainer"><img src="http://www.walldevil.com/wallpapers/a52/wallpapers-pixel-landscapes-wallpaper-mountain-mountains-large-landscape.jpg"></div>
You can set maxHeight on the parent container and set overflow to hidden. So it will cut off the image. Something like this. This image is 1080px but I am only showing 600px of it.
.imageContainer{
max-height: 600px;
overflow: hidden;
<div class="imageContainer"><img src="http://www.walldevil.com/wallpapers/a52/wallpapers-pixel-landscapes-wallpaper-mountain-mountains-large-landscape.jpg"></div>
.img-holder {
min-height: 500px;
background: url('http://wfiles.brothersoft.com/w/waterfall-hd-wallpaper_171535-1920x1200.jpg') center center no-repeat;
background-size: cover;
}
#media screen and (max-width:768px) {
.img-holder {
min-height: 300px;
}
}
#media screen and (max-width:400px) {
.img-holder {
min-height: 200px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid text-center">
<div class="row hero-image-container vertical-align">
<div class="img-holder">
</div>
<h1 class="hero-image-address">
<i class="hero-location-icon ion-ios-location" ariahidden="true"></i> Address Here
</h1>
<div class="hero-image-after"></div>
</div>
</div>
Try using it as background-image like this with background-size:cover.
I have a three sections in my webpage.
When I reduce window size, it keeps on resizing. I want to stop resizing at some point so that the contents in the web page will not overlap.
Here is my code:
<div class="section1">
//code here
</div>
<div class="section2">
// code here
</div>
<div class="section3">
// code here.
</div>
Here is my css.
.section1{
width:14%;
}
.section2{
width:26%;
left:14%;
}
.section3{
width: 60%;
left: 40%;
}
I noticed at 900px width the page contents are good. I used this statement.
#media (min-width:900px) {
.section1 {
width: 5%;
}
.section2{
width: 28%;
left: 5%;
}
.section3{
width: 67%;
left: 33%;
}
}
It is still keep on resizing to till 230 pixels but I want to stop resizing at 900 pixels. Do I have to specify the width in pixels instead of percentage?
You can wrap your 3 div section into div wrapper that have a predefined hardcode width of 900px.
HTML Wrapper:
<div class="wrapper">
<div class="section1">
//code here
</div>
<div class="section2">
// code here
</div>
<div class="section3">
// code here.
</div>
</div>
CSS to add:
.wrapper {width: 900px}
Hope this will help to solve your issue.
If you set a minimum-width the elements in question will resize only until that point.
Example:
#media (max-width: 900px) {
.section1 {
width: 5%;
minimum-width: 250px;
}
}
In the example above, once you hit a viewport of 900px the element will resize accordingly until it hits 250px in width, then maintain that width and stop resizing further.
I was working on a page and I created a 2 column layout with the central content in a #wrapper and then I made both columns the same height.
Column 1 has more content than Column 2, so to achieve the same equal height, my code is:
CSS:
#col1 {
width: 70%; height: 100%;
min-height:30em; float: left; margin: 0; padding: 0;
}
#col2 { width: 30%; height:100%; min-height:30em; float: right; margin: 0; padding: 0; }
#wrapper { width: 70%; height: 100%; min-height:30em; margin: 0 auto; }
HTML:
<html>
<head>
...
</head>
<body>
<header><h1>Title</h1></header>
<div id="wrapper">
<div id="col1">
Content here
Content Here
Content Here
Content Here
Content Here
</div>
<div id="col2">
Some Content
</div>
</div>
<footer>
<p>Footer Content</p>
</footer>
</body>
</html>
My Content in #col1 overflows in Safari but not the other browsers. Does anybody have a solution for this issue? I have played around with the height and min-width properties but hadn't found a way to get the Safari browser to comply.
My goal was to make the page responsive, #col1 and #col2 with them expanding to full hieght regardless of content (and without overflow).
If my question is unclear I can clarify.
Cheers!
Edit
I had also tried to use a few media queries, for example:
#media screen and (min-width: 1000px) {
#col1, #col3, #wrapper { min-height: 35em; }
}
#media screen and (min-width: 500px) {
#col1, #col2, #wrapper { min-height: 40em; }
}
I thought that if I extended the min-height each step of the browser dimensions re-sizing, that both columns would, in effect, grow and accommodate the overflow text.
You are using min-height: 30em so you always run the risk of overflowing, depending on size of the screen you're looking at. How about using the old 100% height content with a fixed height footer at the bottom?
Like this:
http://jsfiddle.net/davidpauljunior/8Hkz2/2/
Not that the box-sizing rules I put in won't work for IE7.
Just a note: The value of the min-height property overrides both max-height and height. So as both #col1 and #col2 are in #wrapper that has 100% height, you should only specify a min-height.
In terms of the overflowing text in Safari, have you tried adding text-overflow: ellipsis; or text-overflow: clip; to #col1?
I need to have 3 divs, out of which 1 is set to width of 1000px and be in the middle of the page, and the other 2 should fill the screen width from the left and right of the main div. I want this to work on all screen resolutions but I can't find the way to do it.
My code so far (I used colors as a visual aid)-
css:
#leftside { background: red; float: left; width: 100%; position: relative; width: 100%; }
#rightside { background: blue; float: left; width: 100%; position: relative; }
#container { background: yellow; float: left; width: 1000px; position: relative; }
html:
<html>
<body>
<div id="leftside"> </div>
<div id="container">the content</div>
<div id="rightside"> </div>
...
So far it is not working. how do I make the "leftside" and "rightside" divs automatically adjust to what is left in the screen resolution - for any screen resolution?
Thanks for the help.
you can achive by doing this with css
#maindiv{
width:1000px;
}
#rightdiv, #leftdiv{
width:calc((100%-1000)/2);
}
#rightdiv{
//other styles
}
#leftdiv{
//other styles
}
test browser support for calc()
You'd have to inject some javascript code:
$content = $('.content');
$sidebar = ($(window).width() - $content.width()) / 2;
$('.leftside').css('width', $sidebar);
$('.rightside').css('width', $sidebar);
See demo
Then use media queries to change the middle div's width when the screen gets smaller.
One way is to put the divs in a table with one row and 3 cells. The table will have width 100% and you can set the width of the centre td.
I'm sure someone will suggest a better way in CSS though.
Kinda stuck on a small issue trying to use a div with a background image in the top left [a logo] not sure how to get this done.... since the variable width is not dependent on a percentage width... i.e.
the maximum width of the div is 1200px
the minimum width of the div is 900px
When someone resizes their browser I need that div to expand or contract depending on the viewport size.
Any thoughts on how I can do this [is this possible without javascript?]?
UPDATE
This is where I got to - seems to work well in most browsers until I hit IE7..
<div id="viewport" class="[[*layout]]">
<div id="contentwrapper">
<div class="wrapper logo">
<div id="header">
[[$TopNav]]
</div>
<div id="content" class="homepage">
[[!If? &subject=`[[*id]]` &operator=`==` &operand=`1` &then=`[[$HomePageTpl]]` &else=`[[$DefaultPageTpl]]` ]]
</div>
</div>
</div>
<div class="wrapper footer">
<div id="footer">
<div id="footnav">[[$FootNav]]</div>
<div id="copyright">[[$Copyright]]</div>
<div id="news-feed">[[$NewsFeed]]</div>
</div>
</div>
div {border: 1px dotted #ccc;}
div#viewport {width:100%;float:left;min-height:100%;position:relative;background-color:#000000;}
div#contentwrapper {width:100%;float:left;background-color:#ffffff;margin-top:8px;}
div#content, div#footer, div#header {float:right;width:900px;padding-left:100px;}
div#header {}
.wrapper {
margin:0 auto;
height:150px;
width:100%;
max-width:1110px;
min-width:1060px;
text-align:left;
}
.wrapper.logo {
background:transparent
url(/assets/images/layout/anderson-lyall-consulting-group-logo.png) no-repeat left top;
}
div#topnav {width:900px;float:right;margin:0 auto;border:1px solid #cc0000;}
CSS has 2 properties for those scenarios, that work from IE7+ called:
min-width: https://developer.mozilla.org/en/CSS/min-width
max-width: https://developer.mozilla.org/en/CSS/max-width
That's probably what you are looking for, you could set the width to 100% first then add the min/max width to control it.
For a no-js solution on modern browser you can use CSS media queries like so
#media screen and (max-width: 1199px) {
div { width: 900px; }
}
#media screen and (min-width: 1200px) {
div { width: 1200px; }
}
this will automatically resize the div depending on your window width and not on the content. Media queries support: http://caniuse.com/css-mediaqueries
a simple proof-of-concept demo
<html>
<head>
<style>
div { margin: 0 auto; border: 1px red solid }
div:after { display: block; }
#media screen and (max-width: 1199px) {
div { width: 900px; }
div:after { content: " max-width is 1199px" }
}
#media screen and (min-width: 1200px) {
div { width: 1200px; }
div:after { content: " min-width is 1200px" }
}
</style>
</head>
<body>
<div>Resize your browser</div>
</body>
</html>