I have problem with units like vh / % for heights. When any input is active, keyboard on mobile devices change elements height. I'm looking for solution to change it to static height when keyboard is active.
jsfiddle (open on mobile device)
The issue is quite straightfoward, we've all experienced it before.
Luckily I rarely work on websites that have elements that need to fit perfectly based on the viewport sizes, however when I do, I prefer to use a jQuery solution to achieve this.
I am going to go out on a limb and assume that you only need to apply this type of rule on mobile, so am going to add this to the code.
jQuery(document).ready(function($){ //wait for the DOM to load
if($(window).width() > 640) { //check if screen width is less than 640px (i.e. mobile)
$('#my-element').css({ 'height' : $(window).height() });
}
});
It is possible to edit the height directly by changing the action to:
$('#my-element').height($(window).height());
but we specifically want to overwrite your CSS rule that stated something along the lines of:
#my-element { height: 100vh; }
I've edited your codepen to include my example.
Related
I'd like to buy a license of cssSlider at www.cssslider.com, but I need to get it to work first.
I want a responsive full-width slider. As the browser window decreases in width, I want to keep the slider height intact at first (so only the sides of the slider image will be cut). After a certain breakpoint (when browser window has same width as the width of the content wrapper on my site), only then do I want the slider to get smaller vertically as well. This way, the slider won't get ridiculously thin on smaller devices. I hope I explain myself well.
I managed to do this on my site with a single image used as background, using a transparent .gif with a width of 1120 x 500:
https://www.easterisland.travel/
I know it's possible with cssSlider, since they have this feature on their first page top slider (http://cssslider.com/), but there's no option to choose this with the cssSlider executable program.
Any clues? Thank you!
For smaller screens, they set the container height to auto inside a media query. Then they appear to serve different images based on screen width. So it looks like 'responsive images'.
Responsive images can be complicated depending on whether you care about IE, your server configuration, and whether you know php or javascript, etc etc. Here's some info: https://css-tricks.com/which-responsive-images-solution-should-you-use/
Alternative solution: you could use the newer css3 units of vw and vh.
vw and vh are percentage of the viewport. The browser support for this will be roughly equal to the support for css3 sliders, so you should be ok!
Try replacing their media query, something like this:
#media only screen and (max-width: 800px) {
.csslider1, .csslider1 > ul {
height: 75vh; max-height:450px;
}
}
In the end, I found this to be the correct code:
#media only screen and (max-width: 1500px) {
.csslider1,
.csslider1 > ul {
height: auto;
}
}
I found the cssSlider program to automatically generate the behaviour I was looking for with the right settings. All you need to do is to put the breakpoint you want as image width, with "Full width" checked.
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.
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.
Is it possible to set a font size to a percentage of the container size? I have a list of items which have an image, a header and a description. The image resizes automatically as the user resizes the window. I would like the header font to do the same.
edit: Javascript/JQuery is fine.
In CSS3, there is the vw unit, which stands for 1/100 of the viewport width. For example,
h1 { font-size: 5.5vw; }
sets the heading font size to 5.5% of the viewport width.
However, this seems to work on IE 9 (Standards Mode) only so far. Moreover, IE 9 does not dynamically change the value of the unit when the browser window is resized, only on reload.
Just to expand on Tyler's answer, this is what javascript is meant for, though I'm tad sure you can achieve the same feat using CSS3 viewports, you will be better off using jQuery (it's usually in the cache of most browser's and always hosted on Google so no need to worry :)
If you have a css like this:
#body #mytext {
font-size: 50%;
}
you can dynamically resize in jQuery like this:
$(window).resize(function(){
$('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});
No, this can only be done in JavaScript.
Is jquery is an option?
Super easy if it is: fiddle
<div id="container">
<p>HELLO WORLD!</p>
</div>
<script>
$(document).ready(function() {
var sizeMe = ($('#container').height() / 100) * 90; /* 90% of container */
$('p').css('font-size', sizeMe);
};
</script>
I've done it with jquery in the past. Check out this article if it's of any interest to you. You can also use CSS to detect device width (not browser, and it's not supported in older browsers).
http://css-tricks.com/resolution-specific-stylesheets/
I am stuck on how should I cope with the screen resolution problem ....
If I design for High resolution(1280px wide) a very long horizontal scroll comes up on low resolution monitors
If I design for low resolution the website seems to utilize jus a little space on the browser
please guide me how to get around this problem any help would be appreciated thanks
There are several suggestions...
Design your site to center everything horizontally, along with designing with fixed widths. Then make sure that the most important part of your content stays in the center. Background images can fill the background area without causing a horizontal overflow (the scrollbar being shown).
Use a design that fills 100% horizontally and make placements based on percentage width's. This may be difficult depending on your design but if you use some fixed width aspects from #1 that can help.
Use conditional CSS loads. Only recommend this if you really need very different layouts for different screen sizes (like mobile sites). You can use Javascript to get the document.body.clientWidth and document.body.clientHeight to get the current window size and load something based on this. Remember though... a user can resize the screen so it won't be as great as #1 or #2.
Google for "Responsive Web Design"
U have two choices:
1-Make your layout width about 980px. so that users with 1024 resolution and higher will see all the screen without scroll.
2-Make your layout 100% width. without specifying constant width for your elements in pixel set their width in percent. so that every body with any resolution will see the whole page without scroll bars.
I had this problem before...
CSS can't detect screen size, but Javascript can. I don't remember how, though. But it can tell you what size does the browser window have. Depending of this size, you can then link to a CSS or another.
I always use the rule of designing for the 978px Grid.
#container {
width: 978px;
margin: 0 auto;
}
This means it will fit in browsers down to 1024x768 and display centered in higher resolutions.
screen resolution problem is not solved by any margin , padding ,absolute and relative when it comes in to body element .....
this is one of solution which i can prefer for one of case :
use offset in window resize function to another element from which you want to alignment (offset top and offset left)
example :
$(window).resize(function () {
var p = $("#divfromwhichyouwantalignment"); var offset = p.offset();
$(".element1toalign").offset({ left: offset.left });
$(".element2toalign").offset({ left: offset.top + 350 });
});