I give my div elements sizes in % because I want them to be able to adapt to different screen sizes of different devices. I however want the size to be constant for a device. For example if a div is 60% in width of my laptop browser screen it should stay 60% even when I minimize size of my browser window.
How do I achieve this?
You are probally looking for
min-width: 800px;
If the width gets under 800px now the div wont resize smaller and just stay at this width.
Just make sure you add a media query like this:
div{
width: 60%;
}
#media (min-width: 601px) {
div{
min-width: 800px;
}
}
#media (max-width: 600px) {
div{
min-width: 400px;
}
}
Using % you can make the div adaptive, but inside side the div if there any image or fixed width elements it will not be adaptive, you need to make them adaptive using media queries
ex:
/* Small Mobile Devices ( < 768px ) Style Begin */
#media (min-width: 0px) and (max-width: 767px) {
.div-elements-name {
width:100%;
}
}
Related
know if there is any css property to resize the elements of a web page according to the height/width of it? i tried with the nowrap property and setting the height to 90vh but i failed
height: 90vh;
white-space: nowrap;
that is, if I resize the browser window, all the elements are still displayed but reduced
You can do this using media queries
e.g.:
#media screen and (max-width: 500px) { ... } to style elements when the width of the browser or device is below 500px
#media screen and (min-width: 500px) { ... } to style elements when the screen is at least 500px or bigger
You can also use min/max height. Read more about media queries here: https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
div {
width:300px;
height:300px}
#media screen and (max-width: 500px) {
div {
background-color: blue
}
}
#media screen and (min-width: 500px) {
div {
background-color: red
}
}
Make your browser window smaller to see the div change color
<div></div>
I have a web project, how do I make the images on my website responsive in any display? Will this is my code is produce an error?
html code
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
css code
#media screen and (max-width: 750px) {
.img-load {
width: 100%;
height: auto;
}
}
You have a few options when it comes to making your image responsive.
With the current settings you have of width: 100% and height: auto, your image is already responsive without the media query.
Your image is not longer responsive if you start using px as a unit of measure for your height and width.
You do haven't need to #media, if you want image width to cover the entire page width, in any device. only:
HTML:
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
CSS:
.img-load{
width:100%;
}
You must use #media, only when you want your image to have different widths in any device.
For example, if you want the width of an image to be 50% on the large screen, and 100% on the smaller screen, you can set:
CSS:
.img-load{
height: auto;
}
#media screen and (max-width: 750px) {
.img-load{
width:100%;
}
}
#media screen and (max-width: 1200px) {
.img-load{
width:50%;
}
}
I am picking up an existing free template Jessicawhite at html5xcss3.com
I notice the images stretch 100% in any screen and in large screen (MAC wide screen for e.g.), it looks really ugly especially the home page slider.
I want to center the whole page/body if the screen is larger than the max size of my images (1280px, sized in the server) like in this site: igihe.com I tried playing with bootstrap-responsive.css. The highest screen it deals with is 1200px min.
#media (min-width: 1200px) {
}
My attempt was for screens with minimum 1400px:
#media (max-width: 1200px) {
//leave original intact
}
#media (min-width: 1400px) {
body {width:1366px; margin:0 auto;}
/* OR */
.body_container {width:1366px; margin:0 auto;}
}
As well, I just tried changing the min-width:1200px to min-width:1400px but it doesn't behave well either.
My issues are: it doesn't correctly react. My screen size is 1366px, which is less than 1400px yet it applies the body styles.
Need i add all the specs under each media to each screen size after words? Meaning, the min-width:1200px contains a bunch of specs. Does that mean each screen size has to define it?
Any shorter solution that puts the menu in consideration?
You can just use the simple css3.
use a wrapper division o wrap all your elements and this wrapper have a display:none; by default for all width of media.
.wrapper{
display:none;
width:your-width-num px;
margin-right:auto;
margin-left:auto;
}
And for the wider screens:
#meida(min-width:your-width-num) {
.wrapper{
display:block;
}
}
I have a div class called form-groupBlogg
It is a form in which I want to adjust the width of it in both ordinary computer and mobile version. I have written the following CSS:
.form-groupBlogg{
width:74%;
margin-top:20px;
}
#media screen and (max-width: 768px) {
.form-groupBlogg {
width: 80%;
}
}
Only problem is that the #media screen and (max-width: 768px)-part wont adjust the width of the div class in the mobile version. The first part with the width: 74% works correctly. How can I adjust the width in the mobile version?
NEW answer:
I guess you just want a wider form on the small screens.
Your site is adjusted in a wrapper, so the width:80% is small on a small screen. Try to adjust the width of the form-groulBlogg and form-group to 100% on the smallest screens. Looks better in my tests.
Try:
#media screen and (max-width: 500px) {
.form-groupBlogg {width: 100%;}
.form-group {width:100%;}
}
I want to make sure a HTML element (in this case an input box) maintains the 'optimal' width on different screen resolutions.
My subjective rules (for simplicity: ignoring the need for margins):
Initially set the width of the element to 40% of the window width
If the size of the element drops below a certain width (eg. 200 pixels), keep that minimum width
If the element won't fit on screen (in this example: window width is smaller then 200 pixels), set the width of the element to the window width
Can this be achieved using pure CSS (and still support IE8)?
As others have said, you can use media queries, here is a working example for your requirements.
input {
width:40%;
min-width:200px;
}
#media (max-width: 200px) {
input {
width:100%;
min-width: 0;
}
}
http://jsfiddle.net/bEvUZ/
.input_box {
width: 40%;
}
#media (max-width:500px) { /* 40% of 500px is 200px */
.input_box {
width: 200px;
}
}
#media (max-width:200px) { /* full width when the screen is smaller than 200 px */
.input_box {
width: 100%;
}
}
EDIT: Working example here http://jsfiddle.net/PXYRN/ and https://code.google.com/p/css3-mediaqueries-js/ for IE8 Support
Yes,
There are multiple ways to do that.
You can use media queries, flexboxes, and also play with box-sizing.
In your case, media queries are exactly what you need.
It's called "Responsive design".
Ex :
#media screen and (max-width: 640px) {
.bloc {
width : 40%;
}
}
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/