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.
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
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)
How can I changed the height of md-toolbar in material design?
http://jsfiddle.net/kostonstyle/gsroofa5/
On the first toolbar I want a height from 30px and tried that:
<md-toolbar style:"height: 30px;">
But it does not work at all. I need a navbar with two bulks, that because of two toolbar.
I try this, but now letter disappear.
http://jsfiddle.net/kostonstyle/r178sp9o/1/
You can use an inline style like this
<md-toolbar style="min-height:30px">
Use min-height to make the toolbar smaller
The height of the toolbar can be changed by adding the classes to the md-toolbar.
For a medium sized toolbar add class="md-medium-tall"
For toolbar bigger than the normal add class="md-tall"
You can also inline style the toolbar style="height:50px;"
The accepted answer did not work for me. Here is how I got it working in my Angular Material app:
<mat-toolbar color="primary"
style="min-height: 30px !important; height: 30px !important;">
This worked for me on Angular 8. Put this code in your scss
.mat-toolbar {
min-height: 50px !important;
height: 50px !important;
}
.mat-toolbar-row {
min-height: 50px !important;
height: 50px !important;
}
Replace 'mat' with 'md'
If just setting the min-height doesn't work, like it didn't work for me, you will also have to add in max-height with the same value:
HTML
<md-toolbar class="toolbar"></md-toolbar>
CSS
.toolbar {
max-height: 30px;
min-height: 30px;
}
I'm pulling my hair here. Trying to come up with a simple responsive layout where two fluid boxes are aligned next to each other. The main box must always be centered in the browser window, while the other should be aligned beside it in its top right corner. See example image below -
Tried different approaches involving negative percentages and three-column faux layouts but it just doesn't work.
Demo: http://dabblet.com/gist/7201560
Markup:
<div class='container'>
<div class='main-col'></div>
<div class='right-col'></div>
</div>
CSS:
.container {
text-align: center;
}
.main-col, .right-col {
display: inline-block;
vertical-align: top;
text-align: left;
margin-right: -4px; /* css-tricks.com/fighting-the-space-between-inline-block-elements/ */
}
.main-col {
width: 50%;
margin-left: 20%; /* equal to .right-col's width */
}
.right-col {
width: 20%;
}
What's happening here:
The centered main column and right column have display: inline-block, and they're centered in the viewport by giving their container text-align: center. They're still not centered the way you want though. Since they're sibling elements you can use margin to push the main column to the left with a value equal to right-column's width, essentially centering itself.
Hi you can check my try in this link http://jsfiddle.net/WHq8U/17/.
I had to use a little jquery to calculate the sidebar absolute position. Let me know your opinion about this.
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 */
}