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/
Related
I want my site to stop resizing (stop being responsive and lock at the desired size) after user minimizes it to a certain point lets say 10inch screen in pixels and when u scroll left of right it is not responsive after that point.
I have tried
body {
min-height:30%;
min-width:30%;
}
But nothing happens at all.
percentage
The percentage CSS data type represents a percentage value. It
is often used to define a size as relative to an element's parent
object. Numerous properties can use percentages, such as width,
height, margin, padding, and font-size.
use min-height:30vh instead of min-height:30% same goes for min-width:30vw for min-width:30%. But if you want to use % you then have to set the width and height of the parent element
:root{width: 100vw; height: 100vh}
or
html{width: 100vw; height: 100vh}
you are looking for media query my friend. check this out:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
you'll use a media query to specify the pixel size (and other options) for example 600px max width is a good measurement for phones. inside the query, you'll write regular CSS to apply under those size conditions.
let me know if you need samples, i'll send you some of my code to help.
here is another good post on stack
Media Queries: How to target desktop, tablet and mobile?
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';
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
Ok. Here is the thing. Like we can use width:100% of an element and it'll take the full width of its container. How can we do that in case of fonts?
I have tried using 100% or em etc but that's not working.
Let me explain the actual problem. Here are three versions of a div. Please see the images.
1- Desktop
2- Android
3- iPhone
You can see that the text "Quote and Buy Online" is in the same line for Desktop and Android (which is the requirement) while it is in two lines in iPhone. Whereas the font-size is the same for all three. Now, that's the problem.
One way is that I reduce the size of the font until the problem gets solved for iPhone but it would then be much smaller for Desktop and Android.
If somehow, I tell the font to adjust its size according to its containing div then the problem will be solved.
Please note that I have checked the solution here but It says it won't be dynamic. So looking for a better alternative.
Here is the link where you can find the form.
This is not possible with pure CSS. You have 4 options:
1) Define the font size for certain breakpoints, to fill up as much as the container as possible, cross browser/platform.
2) Use Viewport Percentage Units: vw as described in this SO answer
3) Use a JS library to fill the text of the parent container, eg:
BigText
FitText
4) Apply a font size that fits the container well, maybe tweak it after 600px +; and live with the fact the font won't fit exactly 100% of the container.
I recommend no.4 for your specific requirment - there will be no JS dependancy, it's simplest to apply and it won't make that much of a difference for your requirement. Maybe the form would look better if you align the text to the left as well. I think no1 and 2 are a bit of an overkill.
You may want to look at using media queries to hit this across the device spectrum. One for iPhone portrait is below, but you will likely have a few to align for all devices.
#media screen and (max-width: 320px) {
.selector { font-size: 10px; }
}
.selector = your class or id of the button or any other html selector or tag.
I personally would go with a screen based fixed figure as you know it is going to render exactly over a scaling method. my 2c worth.
Further Reading: http://css-tricks.com/css-media-queries/
Well I am working on an small website.
However I have problem with fixed position.
My header is 770px in width. It contain a couple of elements with it.
position: fixed; works really fine, but when I resize my website to another screen size, something like 640x480 the fixed element (header) cannot be fully visible in width.
I want it to be fixed for scrolling but I want it to be fully visible in width, if user is on smaller screen and cannot see it completely.
Here is an example on an wordpress theme.
http://dvl-den.net/
Same problem is with my small project. Try to open that website on 640x480 (resize browser) and you'll see my problem.
Thanks in advance.
I don't think there is a solution with CSS only properties. I'd try having position: absolute; on my CSS, and playing around JavaScript (my example requires jQuery) like:
jQuery(function($) { // document ready
var $win = $(window),
handler = function() {
// try not to overload browser, creating a throttle
var throttle,
throttleFn = function() {
// this is what happens on window resize
$('#header').css({
top: $win.scrollTop()
});
};
return function() {
clearTimeout(throttle);
throttle = setTimeout(throttleFn, 100);
};
};
$win.resize(handler());
});
It doesn't work really "cool" in mobile, but it's widely know there are mobile issues with fixed headers in web apps (different than native). If you need I can update with a JSFiddle example.
Check demo at: http://jsfiddle.net/qaKT7/ (you can play around with that 100 value to get a better experience, and also use .animate() instead of .css() to make it look fancier)
Try giving
min-width:770px;
or try with media queries
I think there're two ways:
Changing the width "770px" to a percentage.
Detecting the pixel height of screen, then adjusting the width according to this.