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?
Related
I want a page with a fixed pixel size to always have the same percantage hight. I cant just use % or any other relative units since I already made the whole site in pixels.
Means when I have a div with a hight of 1500px and view it on a 1366x768 screen the whole 1500px div should still be visable completely.
The effect I want to accomplish is something similar to a browser zoom.
You could try min-height: 1500px; on the div, then put overflow-y: auto on the body or html elements.
If you want something to dynamically resize depending on the window height you'll want to look into either CSS flexbox, using the vh sizing, or using javascript to detect window resizing.
You could use the viewport meta tag for that. Just remove the "initial-scale=1" part and the page should always be rendered to fit the screen.
You should note that this might result in the page being shown very small which can lead to problems when people want to access it with a smartphone for example. If you want to optimize your page for different devices and screens, I suggest you make yourself familiar with responsive webdesign.
Something like height: 100vh; would make the object's height 100 percent of the viewport height. It seems like there is no way around switching from px to something else.
I have a few divs on my code all of them positioned correctly how i want it. The only problem is that they do not re size when i shrink the page. I want to be able to re size them according to the web browsers size. I do not know exactly how to do it and im worried it might mess up their correct top & left position. All of my divs are currently set as absolute positioning.
Set their sizes to percent values rather than pixels (I asume that's what you're using)
Set all divs with percent values.
Or
You can use 'media rules' of css3:
#media screen and (max-width: 300px) {
.div-a {
background-color: lightblue;
}
}
You have basically 3 options
Bootstrap (http://getbootstrap.com/)
Use percent values instead of pixels
Use vh (view height) and vw (view width). Here's an example: http://jsfiddle.net/7m55nur1/
Note that width: 75vw; keeps the div width at 75% of the web browser. Same as margin-left: 12.5vw which keeps the margin on the left at 12.5% of the browser size.
I figured it out, basically what i did what get the width (lets say it's 300 pixels) and figure out the percent of the page width (in my case is 1900 pixels).
The result would be 15.789473684210526%
putting that exact value worked just fine! As accurate as a pixel.
I used this tool:
http://www.onlineconversion.com/percentcalc.htm
Thank you all for your replies!
I am trying to change my navigation bar's position from the top of the screen based on the screen width. I tried in CSS: top: 10%, but this is based on the height of the screen not the width.
Is there a way to get top: .1 * width?
Quite often overlooked is that the vertical margin percentage properties of elements refer to their containing block's width, not just the horizontal ones.
That means that if you set something to margin-top:10%;, it will have a top margin equivalent to 10% of it's containing block's width.
You can easily see that in this jsFiddle. Try resizing the output panel vertically and horizontally, and note which resize direction makes the inner block move up and down.
You can use vw and vh and if your browser targets are allowing, I'd recommend that. But if you can't use them, you don't have to use Javascript right away. Too many people gun right away for Javascript when it opens up a whole new can of worms (like, what if the browser resizes?), especially when a bit of creative use of CSS can get you out of a sticky spot anyway.
I was going to say there is no way to do so, but apparently in CSS3 since 2011 you have vw/vh that allow sizes to be relative to the viewport. For example:
img { height: 95vw; }
should give images a height that is 95% of the viewport width. Read more; apparently only IE9 supported it at the time of writing.
I'm designing a mobile website and I want the image that I am using to be fluid in order to match the individual's browser size. However, I don't want someone to come to the website with a massive browser resolution or something just out of my next media query and have it look bad. So I'm wondering if it's possible to have a maximum width the image will go? For example, if I set the image to 90% width, but then it can say something like, however, it can only be a maximum of 500px long, after that it will just say 500px long. (I also want to do this with other elements, like div wrappers)
Also, with the %'s, does the image maintain it's same aspect ratio?
The correct behaviour of max-width should override the image's width. Like so:
img {
width: 90%;
max-width: 500px;
}
MDN page: https://developer.mozilla.org/en-US/docs/CSS/max-width#Notes
When writing a webpage in html, can you use two different quantitative measures for width and min_width?
For example can you use:
width: 90%
min-width: 600px
Do they both have to be the same unit of measurement (px or %) or does it not matter? I'm trying this in a webpage but it is not working. I am using this to minimally size a jqGrid table, but I wouldn't think that would matter.
These can definitely work together. The width declaration will be set 90% of whatever it's container width is. The min-width makes it so that element has to be at least 600px wide.
It should be min-width: 600px;. They can be used together and can use different units. See an example here. The element will not shrink to any smaller than the min-width, if there is enough space it will use the width value, so in this case 90% of the available space.
You don't described exactly how you allow the user to change the grid size. If you use gridResize then you can add additional options like
$("#list").jqGrid('gridResize', {minWidth: 450, minHeight: 100});