I am working on a site where certain sections have 100% height. To achieve this I am using the new css3 unit vh as a min-height (100vh).
In each section there is also a element which is absolute positioned and aligned with the bottom of the page. You can see an example of it here.
The problem which occurs is that on a smaller screen the button shows up upon the text.
I know that I could e.g. let the button disappear on smaller screens with #media; instead I would like to know if there is a css3 possibility in doing something like this:
.element {
min-height: 100vh && 200px;
}
Any other css tricks too achieve this are also appreciated (I can change the markup).
No, it makes no sense to use like that. You must use media query.
If it was to be added like you mentioned it would just sense if vh is undefined px would take.
But to say, it would never be applied like so.
Related
Hi I don't know how to solve this...
I want the element marked with a red rectangle in the images to move depending on the size of the screen ALIGNED to the containers below ALL THE TIME. I'm making a responsive website with the different media screen instances but I want to be sure that this element keeps in the same alignment all the time. How do I do that? No JS please.
http://www.awesomescreenshot.com/image/58399/669844960fdd9761084f64bae5d29112
since you haven't provided any code for what you have so far its difficult to help you. However, I think I understand what you need and you need to specify some width constraints to accomplish this:
you will need a container inside the header that will have the same width as the content below. Here is a working fiddle
css {
width: X%;
}
I'm looking for a way to put two portrait images on the same line, and keep them there, even if I resize the window, they should resize too...
Any idea how I can accomplish this?
Note: I'm looking for this info to use on tumblr.
OK, so your question is a bit weird and hard to understand. Might wanna fix that.
If you're just wondering how to make the images stay on a line and resize with the browser window, you can assign them a width value with a % property.
Like this:
JSFiddle
img {
width:30%;
/*
eventually max-width and/or min-width
*/
}
I have a plunker to show: http://plnkr.co/edit/nGjdvrG27jNpQ3QTulMr?p=preview
I want the green area to fill the remaining available height. I can set div height:100% and get almost I want, but that is less than desirable.
Is there a way to do this with css? Do I need to do some sort of resizing via js?
I've set the following classes to height: 100% and it seems to work now:
.tabset, .tab-content, .tab-pane, .tabbable {
height:100%;
}
Updated Plunker
if you use flexbox layout you can do it this way:
override the display property of the '.tab-content>.active' class. By default it is set to 'display: block'. It has to be set to 'display: flex'. Also modify the tab template.
See my solution:
Using flexbox layout with angular-ui tabs
The easiest way that I know is to set the height with vh units. They were introduced in CSS3
height: 100vh;
Updated plunker.
vh unit is setting the viewport height. I believe it's viewed as setting it to a % of the viewport, or visible screen. So simply changing 100% to 100vh gives you the desired outcome.
It seems like it's pretty widely used: http://caniuse.com/#search=vh. Just depends on who your audience base is I suppose.
This probably was answered somewhere, but I can't find it :s
My question is about dynamic resizing of divs based in percentages.
Please look at code example below for the examples and possible solutions I made.
I ask if there is a better way to do resizing?
More detailed explanation:
Say I am writing a plugin that people can insert in their pages. (Imagine login form).
I go ahead and design the plugin's divs. I use media queries to achieve desired look for different devices. I work on a div straight inside of a 'body' element.
I use percentages for design (I like percentages). Say I set div to 80% width.
Now I give this plugin to the user. User goes ahead and puts the plugin's div inside of another
div that is 100px in width. Now everything looks awful. (80% of 100px is not a lot [80px]).
And of course I want user to put my plugin inside of whatever small-width divs that he have.
The solutions I saw so far to this problem was to create a holder div of certain width - say hardcode 300px. (ex - jQuery UI's Datepicker div; Meteor's login widget div). And then code to it always knowing the 300px width that I set before is not going to change.
But I don't know how good of a solution this is.
Moreover if I decide to go with hard-coding width, my plugin would need width of ~ 1000px. Because I want div to resize with media queries.
And if I go with hard-coding width (say holder div of 1000px width) and put it on a page, the page will have horizontal scrolling. And you cannot simply hide holder div (parent div) and have child to show at the same time. So this requires setting position:relative for holder (parent) div, putting it outside of window, and use same for child div - position:relative with same offset in opposite direction of parent offset.
I hope I am being clear so far and have not confused you!
A code example to illustrate what I am talking about:
http://jsbin.com/ifawez/18/edit
#cimmanon's comment cleared things out for me.
The problem is with lack of HTML/CSS "tools" available at the moment. Since responsiveness came into play fairly recently there are not a lot of CSS-native tools to accommodate changes in dimensions.
For instance media-queries exclusively work with width of window/document and not of other elements such as divs.
The solution I currently employ is using Javascript to determine width of a div and resize accordingly.
What I resize is the number of columns I want to display (I use Multi-Column module as suggested by cimmanon) which is pretty stable on webkit browsers. Since it is all done in Javascript (and jQuery's Sizzle) I keep an array of sizes like so:
var widthArray = [
{min:0, max:250, columns:1, secondary:false},
{min:251, max:350, columns:1, secondary:true },
{min:351, max:479, columns:1, secondary:true },
//more div sizes
];
// more code here
$(element).css({
"column-count": object.columns,
"-moz-column-count": object.columns,
"-webkit-column-count": object.columns
});
This is sort of like media-queries, but allows to work with width of html elements, not screen size alone.
Additionally I follow the way jQuery UI displays its components: using position relative/absolute.
.outer_div {
position: relative;
}
.inner_div_with_elements {
position: absolute;
z-index: 1010;
width: 99%;
float: left;
overflow: hidden;
...
}
.inner_components_displayable {
position: relative;
display: block;
}
.inner_components_hidden {
display: none;
}
So in Summary:
Media queries alone work with size of screen, and resizing of any inner element can be done in percentages to the screen size. They can be of huge help, but you turn into making your components work either with percentages based off screen, or specifying something like min-height and !important (as suggested by #Octavian)
Javascript manipulation of elements is currently easier, but is a costlier alternative (jQuery SIzzle is pretty slow)
A lot of libraries (ex. jQuery UI) use Javascript together with position relative/absolute to make sure their components/plug-ins will work nicely on all users' screen sizes.
I ended up combining position with javascript to emulate media-queries and multi-column design at the same time for responsiveness.
Thanks everyone who participated!
If I am reading this correctly, the main issue here is that it can potentially become too small based on where the code is located.
So why not just add a min-width property with !important? That way you can still base the size off of the parent container, but be sure that it doesn't get too small and ugly.
Potentially, you could even have a script to base the width off of the parent div and the min-width off of the screen size.
I'm trying to create a fluid-layout in html, containing images.
For now, I support 2 sizes for the layout. The default layout is used to display a 1000px wide site. If the screen is wide enough (wider than 1200px), I enhance many aspects with css media queries.
I have a DIV container that is 600px wide for the default layout, and 700px for the enhanced layout.
There is a random image inside, for which I know some metadata (width and height). I may need to downsize the image if it is too large for the container.
So I use this code to have a fluid-layout
<div class="container">
<!-- for a 650px/400px image, the downsized version is 600px/369px -->
<img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>
and the style
#media screen and (min-width:1200px){
.container IMG {
width:auto !important;
height:auto !important;
}
}
Here is how it works:
In case of the default layout, the inline style applies. So the image is down-sized to 600px/369px to fit the container.
Otherwise, the media query style applies, and the image is at its default width/height (I know the image is never wider than 700px so all is fine).
My problem comes from the loading state of the image and the space reserved by the browser. The behaviour of chrome/firefox is the same but is quite strange for me. Not tested with IE (not my priority actually)
For the default layout, no problem, the inline-style still applies. The browser displays a white space corresponding to the image.
For the enhanced layout, the "auto" sizes applies. But the browser does not know the natural size of the image while it is not fully loaded, and it appears that "auto" is equivalent to 0px. It would be perfect if the width and height attributes set for the image applied. But it is not the case. The result is that no space is reserved for the image, which is not the behaviour I want.
A first solution I found is to add another inline css rule for the image. If I add "min-width:600px; min-height:369px" the reserved space for the image is always 600x369 pixels, instead of 0 pixels for the enhanced layout. That's better, but not perfect yet.
-- What do you think ?
Is it possible to "reset" the css instead of overriding it with the "auto !important" rule ?
Should I use an other approach ?
I may use some javascript, but I think it is a bad idea to rely on it. Actually, I may have a lot of containers similar to the one described above. I prefer an automatic solution (css is great for that).
you can just set the width or height to initial.. that resets the Value on override..
The general approach that I've seen thrown around for responsive images is to have a parent element (like .container) change sizes with media queries. In your markup remove the width and height attributes, and then in your CSS add:
img {
width: 100%;
}
As your parent element's size is dictated by media query rules, your image will grow accordingly.
I'm bringing this up because it looks like you want to use the same image file, but just have it grow/shrink. The major drawback is that a larger image could load on a mobile device screen, and add to page load. This is the major technical hurdle facing Responsive design currently, and there is great debate about the best way to address it.
Use .container IMG.someClass { ... } then you can remove the class name from the image to remove the CSS styling.