How would i come across the effect from this website http://www.theqcamera.com or http://plugandplaydesign.co.uk (the video + image at top) so that the image fills the screen on any screen size. Im not sure if this is responsive height but really would like to know how to do it.
There are a few ways to do this. The easiest is to use vh (vertical height) in your CSS. A setting of 100vh will make your div be 100% of the height of the screen being used to view the page. Combine this with a background image that is set to "cover" and a 100% width on the domain and you should be good to go.
<body>
<div class="container">
<div class="div_1">
content
</div>
<div class="div_2">
other content
</div>
</div>
</body>
.div_1 {
width: 100%;
height: 100vh;
}
.div_2 {
width: 100%;
height: auto;
}
Please note: vh is not supported in IE8. If you need to support IE8 for your project, going with position:absolute; height:100%; width:100%; margin: 0; is a slightly more complicated, but more backwards compatible answer.
try using height 100% , position absolute , margin 0 auto
this is how I've made my picture 100% on my website (http://www.dotto.be)
Related
I would like to present desktop users with a phone image and overlay an iframe that displays an external website to fit the phone screen. Both should be responsive.
If possible, When the visitor is already on a mobile phone then they should see the the same thing that is seen on the desktop, but without the phone as a frame.
Does anyone know how this can be done?
Here is the method that I use for responsive stacked divs.
This will work for both methods you asked for, but I would suggest not loading a desktop version to the mobile users, for bandwidth purposes being they have no option to prevent the content to load.
It is based on percentages and from my experience, it has the best responsive results, with minimal coding. Once you replace the photo, you will need to adjust the width and height percentage values in the CSS to scale as desired.
The Markup
<div id="container">
<div id="photo">
<img src="https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-6-6s-6-plus-6s-plus-1.png" width="100%" height="auto">
<div id="site">
<iframe src="https://www.godaddy.com/" width="99%" height="99%"></iframe>
</div>
</div>
</div>
The CSS
#container {
position: relative;
width: 100%;
max-width: 600px;
height: auto;
}
#photo {
position: absolute;
width: 100%;
}
#site {
position: absolute;
width: 100%;
max-width: 43%;
height: 76%;
top: 11.75%;
left: 28.25%;
border: none;
}
JsFiddle Demo Link
When we want to insert a Facebook like box, we're given auto-generated code to insert into our website.
Unfortunately, the width of the like box is hard baked into the code:
<div class="fb-like-box" data-href="https://www.facebook.com/bibandtucker.net.au" data-width="450" data-colorscheme="light" data-show-faces="false" data-width="300" data-header="true" data-stream="true" data-show-border="false"></div>
How can I make the Facebook like box responsive, so that it will reduce in width to accommodate content areas less than the hard coded width value?
You can see the problem on this website. Watch what happens when you reduce the width of the view port.
You can make it fluid by doing this (googled for it):
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
width: 100% !important;
min-width: 200px;
}
You can make it responsive by finding where it starts messing up the layout:
#media (max-width:1100px) {
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
width: 100% !important;
min-width: 200px;
}
}
Since it's an iframe that you don't control, you can't style it further.
Demo: http://jsbin.com/mehil/1
This no longer works as of 2015 -- facebook has updated their code so that there is a minimum width of 180px.
to get around this you have to use JS.
in this case, .facebook-likebox is the wrapper (which is dynamically being scaled in relation to other elements), and .fb-page is the container for the iframe. the code is cross browser.
here is my code snippit:
facebookScale = function () {
var adjustWidth;
adjustWidth = $('.facebook-likebox').width() / 180;
return $('.fb-page').css({
'-webkit-transform': 'scale(' + adjustWidth + ')',
'-moz-transform': 'scale(' + adjustWidth + ')',
'transform': 'scale(' + adjustWidth + ')'
});
}
$(function(){
$(window).on('resize', facebookScale);
})
EDIT: also make sure the following is in your CSS:
.fb-page{
transform-origin: 0 0;
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
}
Edit 2: facebook seems to have updated the widget to now have a min width of 180. so the code has been updated to reflect that. the widget should resize to fit the width of your container otherwise
<div class="fb-wrap">
<div class="fb-like-box" data-href="http://www.facebook.com/#"
data-width="100%" data-height="#"
data-show-faces="true" data-stream="false" data-header="false"></div>
</div>
.fb-wrap {
padding-top: 10px; width:90%; margin: 0 auto;}
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style]
{width: 100% !important; }
This works perfectly for me
this works for me with show faces true
.fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style]
{max-width: 100% !important;}
Is there any suggestion how do you work with position:absolute with responsive design?
I have a design which is 1000px width, and left from that container div(1000px) I have image, positioned as position: absolute.
Problem is, when I decrease width of browser I get horizontal scroll.
What is the proper way with positioning absolute divs with responsive design?
Edit: This is an example I am talking about http://jsfiddle.net/FeAUr/ . For purpose of example I set container width to 100px, instead of 1000px.
Point is, that I get horizontal scroll bar when I decrease width of my browser because of that "absolute" element with picture. How can I do it in proper way, that I wont get horizontal scroll bar?
<div class="bggrey">
<div class="absolute-left"><img src="http://placehold.it/200x200" /></div>
<div class="row">content</div>
</div>
.bggrey{
width: 100%;
background: #999;
height:500px;
}
.row{
width:100px;
height:500px;
background: #fff;
margin: auto;
}
.absolute-left{
position:absolute;
left:50%;
margin-left:-300px;
width:200px;
height:100px;
}
I accomplished this with making another div for background and putting image as background-image. Using zurb fundation for responsive image helped too.
I have a site where I have an element with padding. I want the images to be the full width of the container regardless of padding, so I have added a negative margin equal to the padding to make it stretch right to the edge. The problem arises when I use responsive images. They ignore the negative margin and squish down to the container size plus padding.
Example:
<article style="padding:20px">
<img style="margin:0 -20px;">
</article>
In a non-responsive world this works fine. How would I achieve this with responsive images. I realize I could close and re-open the article tag, but this will cause a bunch of other issue in my real code, so I'm hoping for an alternative.
Most likely the only way is to wrap images into a div, e.g.
<article>
<p>...</p>
<div class="img-wrapper">
<img src="..." />
</div>
<p>...</p>
</article>
with css
article {
padding: 20px;
}
.img-wrapper {
margin: 0 -20px; /* minus left/right padding of article */
text-align: center; /* center small images */
line-height: 0; /* remove possible gap below image */
}
.img-wrapper > img {
max-width: 100%; /* max-width now is relative to .img-wrapper */
height: auto; /* to keep aspect ratio */
}
We have a solution utilizing JavaScript, but I'm also curious if there is a way to do this with pure CSS?
The Situation
I'm relatively new to responsive design, and in the past have stuck with positioning, etc to achieve my layouts. I'm attempting to create a simple responsive header that resizes in a specific way.
My Dilemma
The header is a 29px high bar at the top of the page, with 29x29 buttons at either end. In the middle, bordering the button on the right, is a div (for page titles) that I want to have a min width of 300, but I also want it to expand with the browser width.
Here is the catch: I want this title div to pull away from the left button, leaving a gap of a max-width of 200px. Once the max-width of the gap is reached, I would like the title div to start expanding, staying pressed up against the right button. See as follows.
note: I've created a jsfiddle here for experimenting
I've modified your JSFiddle and added a bit of JavaScript to get the effect I think you're looking for. There are also comments to walk you through exactly what the JS code is trying to accomplish.
Essentially, I'm binding a handler to the window.resize event, calculating the available space in the header, and adding or subtracting from the title container to maintain its width.
Okay well here is what I have so far. WILL EDIT in the morning (kind of tired)
I feel this is definitely possible but it does require javascript. The fact that you want there to be a 200px space available requires javascript or some sort of programming to tell the styling to do that.
<!DOCTYPE html>
<html>
<style>
html, body { height: 100%; }
#container { margin-top: 29px; }
header { height:29px; margin: 0 49px; background-color:#999999; }
#div1 { width: 29px; height: 100%; background-color: yellow; display: inline-block; }
#div2 { width: 100%; height: 100%; background-color: blue; display: inline-block; }
#div3 { width: 29px; height: 100%; background-color: red; display: inline-block; float: right;}
#div4 { height: 100%; background-color: yellow; display: inline-block; float: right; }
</style>
<body>
<div id="container">
<header>
<div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div id="div4">div4</div>
</header>
</div>
</body>
<script>
if (parseInt(document.getElementById("div2").clientWidth) >= 200) {
document.getElementById("div2").style.width = "200px";
}
</script>
</html>
So the way I went about it is rather than having 3 divs, I made 4 -- the original 3 you had, but then the white space you want to consider as, well open space, I made a div for that as well. I also have javascript so that when the window scales past a width of 200px, it will lock it at that width. Unfortunately, I'm not super polished with my CSS yet so I'm still trying to figure a way to get that working. If anyone wants to edit my answer, please feel free.
Another thing to point out is that while the javascript does working for if the nav is growing, it doesn't for shrinking. I didn't implement a way for it to be able to shrink if say the user decided to shrink his window size because I have it set to lock the width at 200px (I guess a way to work around that would be with an } else { clientWidth = "100%"? Not sure. Hope this gets you on the right track though.