How would you resize a carousel according to browser's height ?
For resizing according to width, Im able to make it responsive with this in CSS
#media (max-width: #screen-xs-max) { ... }
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) { ... }
#media (min-width: #screen-md-min) and (max-width: #screen-md-max) { ... }
#media (min-width: #screen-lg-min) { ... }
But for making it responsive towards height, im not sure how would I do it.
Any clue ?
You can use css unit vh for using screen height purposes. 100vh means whole viewport height. vh is dynamic so it changes as you change the screen size.
Here is one demo from fiddle
.carousel .item {
max-width: 100%; /*slider width*/
max-height: 100vh; /*slider height*/
}
Thanks Sachin Kanungo.
I had the same issue as Max.
But for me it worked with these settings:
.carousel {
height: 80vh; /*slider height equals to 80% of viewport height*/
margin-bottom: 60px;
}
.carousel .item {
min-width:100%;
height:80vh; /*slider height equals to 80% of viewport height*/
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 80vh; /*slider height equals to 80% of viewport height*/
}
Note: I'm using bootstrap 3.3.6
Related
When I use the code width: 100%; Under the css code #media screen and (max-width: 768px) it does not make the element appear to be width 100% when I toggle the divicebar and shrink the deminsons to 768px it doesn't change the element.
On the other hand when I use flex-basis: 100% the code work why does that happen?
This code below works.
#media screen and (max-width:768px) {
.article-3{
flex-basis: 100%;
height: auto;
}
#media screen and (max-width:768px) {
.article-3{
width: 100%;
height: auto;
}
}
Does anyone know why this code above doesn't work?
i have a codepen in which there is a dismissible drawer with top app bar component
which on resizing to 598px width the top app bar width decreases from 64px to 56px
but when using #media query to align it the drawer is not aligning please can you give a solution to this
codepen >>> https://codepen.io/BhavyaSingh2003/pen/NJbGoO
#media all and (max-width: 599px) {
.mdc-drawer--dismissible {
top: 56px;
height: calc(100% - 56px);
}
}
This CSS declaration:
.app-drawer-layout .mdc-drawer--dismissible
has more specificity (weight) than just:
.mdc-drawer--dismissible
So you can either write selector with the same specificity:
#media all and (max-width: 599px) {
.app-drawer-layout .mdc-drawer--dismissible {
top: 56px;
height: calc(100% - 56px);
}
}
...or add !important to your CSS:
#media all and (max-width: 599px) {
.mdc-drawer--dismissible {
top: 56px !important;
height: calc(100% - 56px) !important;
}
}
I have a flex-box grid of divs.
I want to change width of that div (in %) depending on screen size.
My scss #media:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
#media (min-width: 1024px) {
width: 25%;
}
But when I test that in Chrome's Responsive tool, I got only this:
Case of 500px width, It doesn't change,
When I change my screen size to 1020, it's OK, max-width: 1023.9px is working.
1200 is OK, min-width: 1024px is working. But less than 1024 - I get that strange things. What do I do wrong?
Generated css for my grid-class:
.image-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 100%;
background-color: #f6f6f6; }
.image-grid .image-wrapper {
width: 25%;
position: relative; }
.image-grid .image-wrapper::before {
display: block;
content: '';
width: 100%;
padding-top: 88.23529%; }
#media (max-width: 1023.9px) {
.image-grid .image-wrapper {
width: 33.3333%; } }
#media (max-width: 768px) {
.image-grid .image-wrapper {
width: 50%; } }
#media (max-width: 599px) {
.image-grid .image-wrapper {
width: 100%; } }
#media (min-width: 1024px) {
.image-grid .image-wrapper {
width: 25%; } }
Hmm, now It works fine when I resize my browser window, I normally get my 1 column with 550px and 2 columns with 700px. Question is answered, but in "Responsive" tool 550px and 700px still not working. Maybe I don't understand the tool.
Finally solved. The problem was totally dumb: I forgot adding meta tag, so Responsive tool didn't work properly. Don't forget about that important line. <meta name="viewport" content="width=device-width, initial-scale=1.0">
Every rule in CSS is able to override any previous rule to the same selector. So you just need to switch your code in order to get it working:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
// experimental
#media (max-width: 1000px) {
width: 50%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
//
#media (min-width: 1024px) {
width: 25%;
}
The reason why your rules override each other is because they all have the same selector and while max-width: 599px is accurate and correct, the later appearing max-width: 1023.9px is it, too and thus it’s overriding the previous width: 100%; from the max-width: 599px media query.
And a side note here: Use integer values only for media queries. There is no screen in the world, which has .9 or even .5 pixels.
CSS is the acronym of Cascade Style Sheet.
This means that rules are matched in a cascade fashion. If you have a viewport width between 1000 and 1024, the 33.3333% is the last that matches and it will be applied, overriding all the previous.
Once you know it, you can change your code in a proper way. If you don't want to re-think your code, you can prevent the overriding using !important.
#media (max-width: 1000px) {
width: 50% !important;
}
Warning: Using !important is a bad practice, the reason is here
I want a div to have a width of 120px on 1200px screen (10%) and when resizing the window to 1920px, the width will linearly increase to a width of 375px (around 20%). How can I achieve this without using JS?
I tried using the calc function but I can't think of the right formula to satisfy both.
I don't want to use Media Queries if possible, but if all else fails, what is the cleanest way to do it in Media Queries?
you can archive using #media-query
for example:
#media screen and (min-width: 1920px)
{
div{
width:375px;
}
}
this is how media query works
if you are looking for calc function try something like this , here 25em corresponds to 400px
{
min-width: 50%;
width: calc((25em - 100%) * 1000);
max-width: 100%;
/* Change 25em to your breakpoint. */
}
You could write it something like this:
div {
height: 200px;
width: 120px;
background-color: tomato;
}
#media (min-width: 1200px) {
div {
width: 120px;
}
}
#media (min-width: 1920px) {
div {
width: 375px;
}
}
This is just using a couple of media queries and a default width which is also necessary. I'm not sure why you wouldn't want to use media queries, they're supported in all current browser (and most old browsers too).
Following your comment, you could try doing something with Viewport units (Viewport width in this snippet). Here's an updated example without media queries:
div {
height: 200px;
width: 10vw;
min-width: 120px;
max-width: 375px;
background-color: tomato;
}
I've been trying to enlarge the logo of our site when viewed on mobile phone but no code seems to work. I've tried different versions of this but to no avail:
#media (max-width: 360px) {
.header-logo img {
max-width: 50%;
max-height: 50%;
}
}
I'm not sure what to adjust further since Firebug seems to be displaying code for the desktop version. And I don't really want to change anything on desktop view. Just mobile.
Will appreciate any feedback.
You can make the below changes in the css.
.header-logo img {
max-width: 100%;
max-height: auto;
}
Try this out
.header-logo img {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
At max-width of 360px change style property for class .custom-logo-link as below,
#media screen and (max-width : 360px){
.custom-logo-link {
width: 50%;
}
}
You have to specify only width, it will adjust height automatically.
.header-logo img {
width: 100%;
}
This may be a silly question, but are you sure max-width and max-height is what you want to change here? Those parameters just set the upper limit of how tall and wide the element can be.
https://www.w3schools.com/CSSref/pr_dim_max-width.asp
Perhaps try one of these?
#media (max-width: 360px) {
.header-logo img {
width: 50%;
height: 50%;
}
}
or:
#media (max-width: 360px) {
.header-logo img {
transform: scale(0.5);
}
}