The code is here:
<div class="entry-page-image">
<div class="featured-image-container">
<?php the_post_thumbnail('large'); ?>
</div>
</div><!-- .entry-page-image -->
Effected by this css:
.entry-page-image { position: fixed; display: inline-block; top: 0; margin: 0 0 30px 30px; margin-left: 260px; float:left; width: 100%; }
.featured-image-container { height: 100%; width: auto; }
.featured-image-container img { height: 100%; width: auto; }
However in Firefox the browser takes the standard 1024px high image, and wont scale it down to be 100% of the browser window height. I'm aware this is quite a common problem, but I can't seem to rephrase my code to the right effect.
Anyone fancy shifting it about for me?
The issue here is that height:100%; on .featured-image-container sizes the height relative to the height of its container.
In this case, the height of the container is equal to the height of the content in the container (the natural height of the image).
If you manually set the height on html,body to 100% then you'll find that the height of your div is now as you'd expect.
Example: http://jsfiddle.net/EyLHG/
html,body{
height:100%;
}
.container{
width:auto;
height:100%;
border:1px solid red;
}
img{
min-height:100%;
}
Update
Also, setting the width of the image to auto will cause the width to be the default width of the image rather than of the container. Setting the width to be 100% will fix this scaling issue:
Example: http://jsfiddle.net/EyLHG/2/
just saw your website, I think there is image still in below the browser as well, I think you might need to add position:relative; to .entry-page-image
Related
Currently I'm trying to fix a div class to always be 80% of the screen size if that's possible? I don't want the div to resize when I change the size of my browser, would I be better using media queries?
.main{
width: 80%;
min-width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
overflow: hidden;
}
You write
I don't want the div to resize when I change the size of my browser
Well, then use a fixed width in pixels:
.main{
width: 600px; /* or whatever value you wish */
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
overflow: hidden;
}
If you always want your div to be 80% of screen size. use viewport units. vw in your case which means viewport width.
This way your div will always be 80vw out of 100vw which is the full viewport size.
See below
.main {
height:100px;
width:80vw;
background:red;
}
<div class="main"> </div>
This is My fiddle:
Its a simple issue and i am not getting why i cant have this background image responsive..
I am using the bootstrap class : "img-responsive" to make it responsive.
After 1460px on width ,the image stops adapting to the width.
The image
id="background" class="img-responsive" lies within
The div
div id="innerWrapper"
This it the required css code:
#innerWrapper{
border: 2px solid;
float:none;
position: relative;
overflow:hidden;
width:100%;
display:block;
height: auto;
background: no-repeat scroll 0 0;
background-size: 100% 100%;
}
#background{
max-width:100% !important;
height:auto;
display:block;
}
I was using http://designmodo.com/responsive-test/ for the responsive testing.
Your problem is that .img-responsive class defines the following CSS:
.img-responsive{
display: block;
max-width: 100%;
height: auto;
}
And what this CSS means is:
Whatever my image size is, it will take all the space it has to fit its natural width (1279px) but, if it overflows its wrapper, it will fit to it.
If you want your image to always fit the size of its wrapper, you have to specify the following css:
#background{
width: 100%;
}
But that's not enought, if you want your image to keep its aspect ratio, you also have to specify the height attribute:
#background{
width: 100%;
height: 100%;
}
Tell me if it worked.
So I'm trying to build a pure CSS responsive square (well actually I'm trying to build a circle but that's easy once I've got the square.)
In other words:
I want a div that has a height that is a percentage of the body and a width that is equal to that (or vice versa).
The div also needs to have another div inside it which can contain content and overflow: auto.
Lastly, the div can never exceed the height (or width) of the body or viewport.
So far, I have got some solutions working partially (i.e. in portrait but not landscape) using a 1px transparent .gif as an img to fill out a wrapper div. Not ideal semantics but I don't see how this can be done without it.
<div class="wrap">
<img src="http://www.neurillion.com/p/35/static/media/images/1x1t.gif" />
<main>
<div class="content">
<h2>Title</h2>
<p> Lorem... etc. </p>
</div>
</main>
</div>
Here are my CSS solutions and what is wrong with them:
This works except it exceeds the height of the body in landscape (max-height in any of the elements does not solve this):
.wrap {
background: blue;
margin: 10% auto;
width: 70%;
position:relative;
text-align:center;
}
.wrap img {
border: 1px solid black;
height: auto;
width: 100%;
}
main {
background: red;
display: block;
border-radius:50%;
height: 100%;
width: 100%;
position: absolute;
top:0
}
main div {
background: green;
overflow: auto;
display:inline-block;
height:70%;
width: 70%;
margin-top:15%;
}
Codepen
Next I added a landscape media query to swap around the height and width values. Same problem.
#media(orientation:landscape) {
.wrap {
margin: auto 10%;
height: 70%;
width: auto;
}
}
Codepen
At this point I started looking into .wrap's parent elements , namely the body and html. (Resource on the difference between them.) I added height and max-height: 100% to both of them, but no joy. I've also tried adding another div container as I thought it might be easier to control the height, but that doesn't seem to be doing much either.
And now I'm pretty much out of options. I'm fairly sure the solution is something to do with the html and body elements and the way they are so eager to expand vertically but I'm not really sure how else to stop them doing so.
Any help much appreciated.
You can use vw, vh and vmin to scale the square:
Demo: http://jsfiddle.net/r9VQs/
CSS (changed part only):
.wrap {
background: blue;
margin: 0 auto;
max-width: 90vh;
max-height: 90vh;
position:relative;
text-align:center;
}
You can also use vmin (which gives better results but is less well supported) and forego the image:
Demo: http://jsfiddle.net/r9VQs/2/
CSS:
.wrap {
background: blue;
margin: 0 auto;
width: 90vmin;
height: 90vmin;
position:relative;
text-align:center;
}
vh, vw and vmin are units equivalent to 1% of their respective viewport dimensions (vh is viewport-height, vw is viewport-width and vmin is whichever has a smaller value).
Please see http://caniuse.com/#feat=viewport-units for browser support.
I have two columns for my website and right now the background color ends at the last piece of content in the left column (which is for navigation).
I've tried height:100%, min-height:100%; etc. Doesn't seem to work. here's the css.
.container {
width: 100%;
height:100%;
min-width: 960px;
background: #fbf6f0;
margin: 0 auto;
overflow: hidden;
}
#sidebar1 {
float: left;
position:absolute;
width: 20%;
height:100%;
min-width:220px;
background: none repeat scroll 0% 0% #007cb8;
z-index:9999;
}
Use viewport height - vh.
.container {
height: 100vh;
}
Update
Please note, there are potential issues with using VH on Safari iOS. See this thread for more information: Chrome / Safari not filling 100% height of flex parent
Set the body height too
body,html{
height:100%;
}
div {
height:100%
}
The reason the div doesn't fill the entire window by default if because it's parent, the <body> tag probably, only stretches as heigh as it needs to. Add this at the top of your stylesheet (I like to order styles in a similar order to that of the tags in the markup):
html, body {
height:100%;
min-height:100%;
}
edit: grammar
overflow-y: auto;
This css code is for your solution.
I am trying to stretch the content area of the page to 100%. I have got a fixed header (50px height) and a sticky footer (95px height) and anything in between should use 100% height...However I can't get this to work. Here is my CSS
<div id="wrap">
<!-- fixed top navigation -->
<div id="main">
<!-- main content -->
</div>
</div>
<footer>
<!-- footer -->
</footer>
The CSS is like this
html, body {
height: 100%; /* needed for container min-height */
}
#wrap {min-height: 100%;}
#main {
position:relative; /* needed for footer positioning*/
overflow:auto;
padding-bottom: 95px; /* must be same height as the footer */
padding-top:50px;
min-height:100%;
}
footer {
position: relative;
margin-top: -95px; /* negative value of footer height */
height: 95px;
background-color:#ebebeb;
}
body {margin:0px;padding:0px;}
Any ideas how to do this?
if you've putted the footer relative ("sticky") meaning you want you website to scroll down with the content.
so you need do create another div ("block") -> in the HTML position the div between header and footer,
and give it a width of 100% and a height of auto; (meaning: the div will fill up verticaly with the amount of content putted in it.
you can make the footer like
footer{
position: absolute;
border: 3px solid #eee;
height: 30px;
top: auto;
bottom: 0;
left: 0;
right: 0;
}
i have tried before a lot
try use javascript to set height 100%
or try to use frameset
UPDATE
this article for using css
http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/
but i am sure 90% that it may have a problems with different browsers but try it.
and this article for using jQuery
http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/
and this for using frameset
http://www.echoecho.com/htmlframes08.htm
and
http://www.w3schools.com/html/html_frames.asp
Finally you will choose what is useful for your project
Good Luck
My Regards
The best and simple way is
html,body{
height:100%;
}
#wrap {
height: calc(100%-50px-95px);
}
.footer {
//your code here
height: 95px;
}