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>
Related
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;
}
}
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 have a left-column and a right-column. When I resize the browser small, the right column spills on to the left. I want the right column to just collapse under the left. How can I do that?
<div class = "container">
<div class = "left-column"> A bunch of content </div>
<div class = "right-column"> A bunch of more content </div>
</div>
.container { width: 100%; }
.left-column { width: 50%; }
.right-column { width: 50%; }
Without seeing any code it's hard to know.
I usually do this with width:100%; or display:block depending..
#media screen and (max-width: 600px){
.right-column{
float:none;
display:block;
width:100%;
}
}
Use media-query for that and on max-width: 600px set ur resolution where do you want right column to fall into the new line ...
How do i prevent the content from jumping down below the sidebar when the min-margin is reached?
http://jsfiddle.net/7SAHm/4/
<div id="wrapper">
<div id="sidebar"></div>
<div id="content"></div>
</div>
#wrapper {
width: 100%;
overflow:hidden;
}
#sidebar {
float:left;
width: 20%;
min-width:50px;
background-color:#ffb8e0;
}
#content {
float:left;
width:80%;
background-color:#fff7b8;
}
Try to resize the browser window and see that the content jumps down, instead i want it to stay next to each other, even though 80%+50px > wrapper width, instad it should overflow not jump down.
Thanks in advance!
You should use a media query in your CSS to change the percentage-
I have edited your code to show you a demo http://jsfiddle.net/kevinPHPkevin/7SAHm/5/
#media screen and (max-width: 400px) {
#sidebar {
width: 50%;
}
#content {
width:50%;
}
}