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>
Related
I have a text (in a div) which shows on desktop and mobile screens.
Expected
I want the text to only show in #media only screen and (max-width: 768px)
How to
hide the div with display:none or
is there any other solution?
Use media query.
Set display:none to div and then apply display:block for mobile using max-width media query.
Stack Snippet
div {
display: none;
}
#media only screen and (max-width: 768px) {
div {
display: block;
}
}
<div>Text</div>
or you can use the min-width media query. Less code here
Stack Snippet
#media only screen and (min-width: 768px) {
div {
display: none;
}
}
<div>Text</div>
I am trying to use #media query to hide a span for tablet screen only like this:
#media screen and (max-width: 600px){
.tablet-screen {
display: none;
}
But it seems to be not working. Can someone correct me that i have to use max-width not min-width to hide span right ?
You have to use both. Under 600px it's not tablets, but smartphones.
You have to say it's min-width: 600px and max-width: 1280px. I will let you define your own breakpoints ;)
Demo : https://jsfiddle.net/Zetura/453gh680/
#media screen and (min-width: 600px) and (max-width: 1280px){
.hide-tablet {
display: none;
}
}
If you use min-width then increase it from top to bottom. Sequence matters!
#media screen and (min-width:220px) { ..... }
#media screen and (min-width:500px) { ..... }
#media screen and (min-width:700px) { ..... }
#media screen and (min-width:1000px) { ..... }
CSS reader stops reading the styles in the particular block when the current screen size is more than given in particular block.
And you don't need to use both at same time.
max-width is just opposite in sequence, biggest width first. But limits the biggest screen width supported. (Why? -> Just think like CSS reader.)
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%;
}
}
I have a bar that spans across the page (100% width) with a child container inside of it that spans 80% of the parent container's width.
I have the following CSS media query that is supposed to increase the child container's width from 80% to 100%:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%;
}
}
However, using the dimensions given to me by my chrome developer tools, the query is taking affect at a width of 990px. Not 900px. This is occurring with all my media queries; they are all activating 80-100px earlier than they should be. Anyone know what might be causing this?
This is formatted wrong.
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar{
.container{
width: 100%;
}
}
}
should be:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%; }
If you want to call on an element inside another element, dont open both elements, just specify which element in which parent you want to edit or change.
You can try like this it will work for you
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
your css here
}
I have some problems with my responsive design.
I have 20 boxes like this
I want to do responsive with mediaqueries
#media screen and (max-width:960px) {
}
#media screen and (max-width: 783px) {
}
#media screen and (max-width: 524px) {
}
But I can't control the boxes in my design. JSFiddle
Try some solutions like these:
http://purecss.io/grids/
http://semantic-ui.com/
Or try adding a specific width to each box for each media query.
I just put these lines of code into the CSS area and it worked outstandingly:
#media screen and (max-width:1500px) {
.block {width: 250px}
}
#media screen and (max-width: 700px) {
.block {width: 100px}
}
If only the width needs to be responsive you can work with max-width and width in percentages. Like so: http://jsfiddle.net/bbwkc/3/
.block_main {
max-width:750px;
width: 75%;
}
And so on.