Maybe I'm afflicted with myopia and just can't see what's wrong anymore but I have some weird horizontal drag going on in mobile safari only (i checked it on a browser and on my android phone and it's working fine.) I'm wondering if anyone has any insight as to how to prevent this from happening? The link to the site is yetisandbox
maybe it's a viewport issue? I'm using this currently:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
Thanks for the time!
I ran into this too. This fixed it for me:
html, body{
overflow-x: hidden;
}
.home-trail{
...
width: 100%;
position: absolute;
...
}
.home-intro{
...
width: 1170px;
margin-right: auto;
margin-left: auto;
...
}
your .home-trail container has a width of 100% and an absolute position. Its parent .home-intro may have a width smaller than the viewport width but is position static. because of that the 100% doesn't refer to .home-intro width. So its 100vw but gets a left distance because the margin-left of its parent plus a missing left:0 property.
Related
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;
}
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.
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.
I need to set the minimum height of a div. In Firefox everything is good, but I'm having trouble with IE7 - an unintended big space.
ul, il {
list-style: none;
padding: 0px;
margin: 0px;
}
.p_block{
color: #336699;
font-size: 14px;
min-height: 18px;
}
<ul>
<li><div class="p_block">text</div></li>
<li><div class="p_block">text</div></li>
<li><div class="p_block">text</div></li>
<li><div class="p_block">text</div></li>
</ul>
Strangely, if I delete padding: 0px; from ul, li, everything works fine. Why?
#Chinmayee, the problem with that solution is that the element's height will not be able to grow past 18px in firefox and a few others.
A good cross-browser solution to min-height:
{
height: auto !important;
height: 200px;
min-height: 200px;
}
Basically;
Line #1: most modern browsers understand !important, therefore will not overwrite the property in the next line.
Line #2: because older browsers do not know !important, it must be a set height. Older browsers will allow the element to grow unless there is an overflow: property set.
Line #3: Modern browsers understand min- and !important. So modern browsers understand height:auto and min-height:200px, while older browsers understand height:200px; but will allow the element to grow ;)
Here's a solution that I prefer:
.p_block{
color: #336699;
font-size: 14px;
min-height: 18px;
}
Then for IE use this:
.p_block{
height: 18px;
}
IE treats height as min-height so it will grow.
You can target IE by including a specific IE6 & 7 CSS file as shown below (goes in the < head >)
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6-hacks.css" />
<script type="text/javascript">
// IE6 Background Hover Flicker Fix
try {
document.execCommand('BackgroundImageCache',false,true);
}catch(ignoreme){
}
</script>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7-hacks.css" />
<![endif]-->
Miss out the auto height and the important and add * before the height.
This will then only be applied to IE7 and below.
.p_block{
min-height: 30px;
*height: 30px;
}
It's what I used, IE7 won't use min-height but will set the height to 30px and will go bigger if required.
use this CSS for IE & FF
.p_block{
color: #336699;
font-size: 14px;
min-height: 18px;
height:18px !important;
}