So I'm using the Skeleton Framework (getskeleton.com) to make web development and design easier. It uses classes in order to change how much space an element is going to use in the grid. For example, to use half of the space you would set the class of the div to be "six columns" (out of a total of twelve).
Now, what I would like to do is change the class of an element when the screen size is less than a specific amount. This way, when the screen is less than X px I could change the class of a div element to make it full width.
Thanks!
As the skeleton classes have predefined values and you should not modify their properties, the solution is using jquery to add or remove class names:
$(window).resize(function(){
var width = $(window).width();
//Assuming X=550
if(width <= 550){
$('#element').removeClass('one-half').addClass('one');
}
else{
$('#myelement').removeClass('one').addClass('one-half');
}
})
also trigger a resize() on documnt.ready to initialize width check:
$(document).ready(function(){
.resize()
});
Instead to change the class, you can use the CSS media query to let the class react in different ways based on the screen size
This tecnique is called "Responsive" and is used for example to make a web site fit properly in a smartphone
Example
<style>
.myclass{width:1000px} /* applied in all resolution > 320px */
#media (max-width: 320px) {
.myclass{width:100px} /* applied in resolution < = 320px (smartphone) */
}
</style>
You can create many media query for many resolution to adapt your
solution in all desktop, tablet and smartphone
Hope it help
Related
Code: https://jsfiddle.net/qo44rgop/
I want the table to move the td's to the next line if the screen becomes to small (now it extends the table beyond the width of the div). I tried to use margin: auto on the table, it centered it on the div but it didn't adapt to the screen size.
One thing you might want to consider is changing the display property of to 'block' under certain size restrictions. Example:
#media (max-width: 600px){
td{
display:block
}
}
I think you should use #media and set the width of the table cells to 100% (or change the display property) when the screen width fits with your concept of small (I think 768px was the normal max-width for mobile devices, don't remember now).
You have an example in the link I gave, at the bottom.
On a number of good websites, I see that the page loads so that the content is the same width as the browser.
Specifically on iPad: If you rotate the screen after page load, and zoom out, the content seems to resize in width to match the screen width again.
What is the "trick" to achieve this? I don't want to use the "width:100%" technique, because I would still like the page to be able to "zoom in", where you then you have to pan/scroll to see the rest of the content.
Sites like what you are describing are NOT using fixed widths, so setting a width on your elements will not let them to fill the entire screen.
If you want to create flexible and fluid layouts, you DON'T want to do this in your CSS:
.yourcontent {
width: 55px;
}
You would want to create your elements with percentage based layouts, or viewport based layouts.
You can play around all day trying to get a fixed width to look just right, but if you change your browser, you of course don't get any responsiveness.
Using something like:
.yourcontent {
width: 50%;
}
will set to only use 50% of the screen width, no matter the browser sizing.
Using VH and VW (viewport height, viewport width) are preferable to using the fixed widths. Fixed widths can be changed depending on screen sizes using media queries, but this is essentially a waste of time and bootstrap will take care of (most) media queries for you.
example:
.yourcontent {
width: 50vw;
}
Check out the bootstrap documentation of the CSS to see how this is achieved: http://getbootstrap.com/css/
You can still zoom in using a library like bootstrap.
I found a solution to my problem. I know its probably not A+ practice, but it seems to work. I basically use fixed widths for elements in the roughly "desktop/tablet" size mode, but I set the width using jquery on (page load/screen rotate), like this: $("myselector").width(newSizeWidth); where the width is based on:
$(window).width();
However, I do use % layouts for roughly smartphone screen sizes, in the same webpage. I conditionally .show() the smartphone div's (that use % layouts), and then I hide the "desktop/tablet" div's (that use fixed sizes).
I use the following in the Head portion for mobile devices:
meta name="viewport" content="width=device-width, initial-scale=1"
BUT
For smartphones with smaller screen sizes, where I don't want zoom function, I change it in the document ready function with:
viewportmeta.content = 'width=device-width, initial-scale=1,user-scalable=no';
I have a div tag like as below.
<div class="col-xs-5 col-md-2 col-lg-1"></div>
With the current resolution of window / device how would I know if it is going to apply either col-xs-5 or col-md-2 or col-lg-1.
The reason for this question is I have to request number of items to the server. If the bootstrap applies col-xs-5 I'll request 10 Items. Otherwise 20 items, 30 items respectively.
Is there any way I'll know which class is going to apply to my DIV tag ?
you need to take a look at the info found on their website http://getbootstrap.com/css/#grid
but what is happening is that when the div has <div class="col-xs-5 col-md-2 col-lg-1"></div> these class names it will apply them based on screen size. bootstrap works on a 12 column grid system so if you use col-xs-5 then it will only fill up 5 of those columns when the width of the screen is xs(mobile) then once the screen hits a medium sized screen it will only fill up 2 of those columns if you are using the col-md-2.
This doesnt actually change anything within your html its just reajusting the size of it.
For example there is a way to hide everything within a div at a certain screen size usig hidden. so if you wanted to hide everything at screen size xs then you would use a div class called hidden-xs this doesnt actually delete what you have on the screen but like its name it "hides" it.
btw the screen sizes for each class are as follows:
Extra small devices Phones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)
Bootstrap will let you style content differently based on device width, but if you want to load different/more/less content, you can detect the width with jQuery. Probably best to use the same breakpoints as Bootstrap to keep things consistent. Then somehow load that content you want based on the if statement that is true:
var width = $(window).width();
if (width < 767){
// load your "xs" content
} else if ((width >= 768) && (width < 991)) {
// load your "sm" content
} else if ((width >= 992) && (width < 1200)){
// load your "md" content
} else {
// load your "lg" content
}
That being said, bootstrap also allows for show/hide at different device widths, which could also solve your problem, but with quite a bit of additional markup.
I am trying to make chess board type table with 15X15 row and columns. My problem is I need to make this table flexible with all the resolutions of mobile phones. The column of each table should not get abnormal stretch but should be stretch with respect to device resolution. I am very much new in CSS and I want to know if there is any way I can adjust the chess board table with 100% scale on width and height. Here is the normal chess board that I am creating on the resolution of 480X854 and 320X480.
One more thing when I use table width and height in pixel then things works for any specific resolution fine but using percentage on table tr does not give result but shrink everything abnormally. I like to see what would be the best solution you guys will use in this situation or if mobile jQuery has anything related to it. Please let me know if I should explain more
Here is the jsfiddle for preview:
jsfiddle.net/97Nz5
You tagged your question with jQuery so I assume you're using it. I don't think there is way to do it in pure css.
$(function(){
var $gameboard = $('#gameboard-terrain');
var $cells = $gameboard.find('td');
var adjustHeight = function(){
var width = $cells.width();
$cells.height(width);
};
$(window).resize(function(){
adjustHeight();
});
adjustHeight();
});
Demo here http://jsfiddle.net/97Nz5/3/
Edit
You're right my function only adjust cells height to be equal with width. What you should use to output different cells size on different resoultions are css media queries. For example like this:
#media (max-width: 479px) {
table {
width: 480px;
}
}
Demo http://jsfiddle.net/97Nz5/8/
I would like to have all input and button elements to appear normal size for < 767px screens. If it is a > 767px screen though I need the .btn-lg and .input-lg classes be applied to all buttons and inputs. This allows for an easier touch experience on larger screens. How can this be done? Can it be done with purely CSS??
You can do with media queries
#media screen and (max-width:767px){
//all the styles for btns within 767px
}
#media screen and (min-width:767px){
//all styles above 767px
}
You can achieve this with jquery too:
if($(window).outerHeight(true) < 767){
//add class to your btns and lists and remove classes...
}
This is one approach and there are many.
Of course it can be done with purely CSS.
Please check the "Responsive utility classes"
here: bootstrap scaffolding
Also you might need http://www.w3.org/TR/css3-mediaqueries/ - Media Queries