The step says that, create a media query for screens smaller than 800px in width. In that media query, create a #gallery img rule and set the width property to 50%. This will convert your gallery to a two-column layout. Based on the instruction I wrote the code as shown below but the error shows "You should add a new #media query". So how can I fix this problem?
#media (max-width: 800px){
#gallery img{
width: 50%;
}
}
I am not clear about what you want. But the width (and height) media features can be used as ranges, prefixed with min- or max- to indicate that the given value is a minimum or a maximum. For example:
#media screen and (max-width: 800px){
#gallery img{
width: 50%;
}
}
aye folks!
is it possible to have dynamic height calculation with css3? i couldn't find anything.. but maybe i'm just using the wrong terms for my search.
the problem: i have a site where i want to include an iframe with 100% height minus the height of a nav-element. unfortunately the nav-element isn't always the same height (44px on one device 36px on another.. and so on)
is there a way to calculate that? or do i need to fix the height of the nav-element to get this to work properly?
You may use display: flex property on the wrapper of the two elements.
html, body, #wrapper {
height: 100%;
}
#wrapper {
display: flex;
flex-direction: column;
}
#frame-fill {
flex-grow: 1;
}
<div id="wrapper">
<div>HEADER DYNAMIC</div>
<iframe id="frame-fill" src=''></iframe>
</div>
Be sure that you look for browser support for flex. Its a newer concept.
Sure!
I'm assuming the nav-element height is dependant on screen size, for which you can give different heights with media queries. So you only need to determine the size or width at which the element height changes:
/*put your conditions here*/
#media (min-height: 500px), (min-width: 580px) {
iframe{
height: calc(100% - 44px);
}
}
/*put your conditions here*/
#media (max-height: 1000px), (min-width: 580px) {
iframe{
height: calc(100% - 36px);
}
}
More info: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I have .psd design for client site, graphic designer drew container width up to 1920px, and I need a help how to properly set up width of container to 1920px.
I know how to set up smaller
#media (min-width: 1200px)
.container {
width: 1170px;
}
Instead of forcing your containers to 1920px and overriding the default bootstrap grid sizes, you may want to look at .container-fluid, which is inside Bootstrap's packaged css.
Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Use .container for a responsive fixed width container.
<div class="container">
...
</div>
Use .container-fluid for a full width container, spanning the entire width of your viewport.
<div class="container-fluid">
...
</div>
Link: http://getbootstrap.com/css/#overview-container
You could utilize Bootstrap's container-fluid class to fill the entire width first, then you can restrict the width responsively... Here is an example in Sass:
.wide-container {
#extend .container-fluid; // which has max-width: auto; (full)
}
// on medium screens and beyond...
#include media-breakpoint-up(md) {
.wide-container {
max-width: 1470px; // limit the width here!
}
}
Just reuse the media query you have above, and simply decide when you want the container to change to that size (something greater than 1920px).
#media (min-width: YOUR VALUE HERE)
.container {
width: 1920px;
}
OR, upon reading your question again, you said, "up to 1920px", so a fluid container?
Then simply set:
.container {
max-width: 1920px;
width: 100%;
}
Your problem is not clear enough. but if you want to set up 1920px wide container, just override the default container width with "!important". like this,
.container { width: 1920px !important; }
Or if you wish to 1920px container only for larger displays, you can use media query like this,
#media (min-width: 2400px) {
.container {
width: 1920px;
}
}
this rule will apply only for displays that is at least 2400px wide.
You can apply your own CSS according to the screen size you want to show as the below example will work on a larger resolution size than 1599px.
#media (min-width: 1600px)
.container {
max-width: 1500px;
}
You could override BootStrap's default styling as the answers above describe, or you could create a new class such as:
.container.wide {
width: 1920px;
}
Then add the class to the container <div>'s such as:
<div class="container wide">
CONTENT
</div>
This ensures only the <div>'s you add the wide class to are effected, meaning you're still free to use <div class="container"> for normal BootStrap container behavior if required.
EDIT
As Vikas has said in his comment, the above style would apply also on mobile. In this case, just wrap in a media query as follows:
#media (min-width: 1950px) {
.container.wide { width: 1920px; }
}
This css will override bootstrap's container sizing. Adjust the max-width values as needed. Tested with bootstrap 4.6.1
/* Override bootstrap to make containers wider by 60px */
#media screen and (min-width: 576px) {
.container, .container-sm {
max-width: 600px;
}
}
#media screen and (min-width: 768px) {
.container, .container-md, .container-sm {
max-width: 780px;
}
}
#media screen and (min-width: 992px) {
.container, .container-lg, .container-md, .container-sm {
max-width: 1020px;
}
}
#media screen and (min-width: 1200px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 1200px;
}
}
Based on your reactions you probably want
.container{
width: 1920px !important;
}
though I don't understand why :). On every smaller resolution it will scroll now.
How do i assign a fixed width property to the container class in bootstrap. I have tried to assign a width value to the major container but when i resize the browser, the content of the container become unresponsive.
<body>
<div class="container"> //This is the major container
</div>
</body>
You can either use <div class="container-fixed"> or your own media query in which you can specify the custom width for various resolution.
Here is an sample
#media (min-width: 768px) {
.my-custom-container{
width:600px;
}
}
#media (min-width: 992px) {
.my-custom-container{
width:720px;
}
}
#media (min-width: 1200px) {
.my-custom-container{
width:900px;
}
}
The default Bootstrap .container class has 15px padding on both left and right sides.
You can adjust this by adding additional padding to your container:
.container { //or use a custom class like .custom-container
padding-left: 100px;
padding-right: 100px;
}
Or you could also adjust the width of your container like so:
.container {
width: 75%;
}
Both of these solutions will maintain responsiveness, but the first one will potentially cause issues with smaller screens. You could also use %'s there as well (like padding-left:10%).
Whatever you end up using depends on your specific situation and the desired outcome. You should play around with different screen resolutions and pages on your site to make sure whatever you go with works well.
I was experimenting with media queries to see the effects.
So I tried using min-width(480px) query to change the width of a div from 100% to 520px when the window was maximised but the width of the div stays 100%.
The code:
#box {
margin: auto;
background: white;
width: 100%;
}
// Media Queries
#media only screen and (min-width: 480px) {
#box {
width: 200px;
max-width: 200px;
background: black;
}
}
So my question is, why does the width of the #box stay as 100% when the window is maximised?
What am I doing wrong?
jsFiddled here is your code with min-width:480px. It applies when the size of available space is bigger than 480px (the black box)
try max-width. This context will apply when available screen space is less then 480 pixels. jsFiddled here, black box will be applied when available space width is lesser than 480px
#media only screen and (max-width: 480px) {
#box {
width: 200px;
max-width: 200px;
background: black;
}
}
So, your #box is by default 100% width except when the available space is greater than 480px. your code is working OK.
Maybe it's the comment : // Media Queries witch caused an error ?
I think you have the media query wrong. As you have it now, it's changes the content over 480px. Where I think you want it under 480px.
So it should be:
#media only screen and (max-width: 480px) {
//code
}
Hence, (max-width: xxx) not, (min-width: xxx).
Example fiddle
I had commented the code using // syntax by accident which isn't supported in CSS, hence the code below that line of comment not working. It now works after I changed it /**/ syntax.