Width doesn't respond according to the media query - css

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.

Related

How to use #media to change width of iframe or div between specific screen sizes(min-width & max-width)

For my site on cruiseguru.co.th, the search box on the left overlaps with page content when screen size is between width 1200px and 765px so I was hoping to change width of the search box only on between two resolution with a css like the one below but of course it doesn't work so it would be great if anyone can advise me the right css.
#media screen (max-width:1200px) and (min-width:765px) {
#IFRAME_2 {
max-width: 360px;
};

You're missing and between screen and (max-width:1200px)
#IFRAME_2 {
width: 600px;
}
#media screen and (max-width:1200px) and (min-width:765px) {
#IFRAME_2 {
width: 360px;
}
}
<iframe id="IFRAME_2"></iframe>

How to use min-width or max-height for panel elements in a theme?

How to use min-width or max-height for panel elements in a responsive theme (in my case Zircon for Drupal 7 is used https://www.drupal.org/project/zircon)? When min-width is used, elements overlap when resized for mobile phones. max-height tends not to be usable. Could you indicate where to change css to make it work for both cases or the one with min-width?
For example, in page.css for adaptive panel elements some classes are used (pane1 and pane2). In total there are 3 panes. The third pane works fine and moves down but pane1 and pane 2 start to overlap each other.
in page.css (Zircon theme):
pane1{ min-width: 300px; }
pane2{ min-width: 300px; }
pane3{ min-width: 300px; }

Use media queries. For example:
CSS:
#media all and (max-width: 500px) {
pane1{
min-width: 200px;
}
}
This code will apply only when browser width is smaller (or equal) than 500px.
I don't know if I clearly understood you, but I hope this will work.

Media queries would be your answer:
#media screen and (min-width: 767px){
.pane1, .pane2, .pane3{
min-width:300px;
}
}
#media screen and (max-width:766px){
.pane1, .pane2, .pane3{
min-width:150px;
}
}

Need to create wider container in Bootstrap - 1920px

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.

Centering a span tag in Wordpress?

I've set up a media query that should center an image when the screen is smaller than 600px. When bigger then 600px, the image correctly displays to the right of the site title. Chrome inspector assures me that the queries are working, but I think there might be an overarching rule that's keeping my margin: auto from applying. The 'globes' image in question is at the top of:
http://livinginbetween.org/temp/
I'd love any suggestions. Thanks in advance for your time.

Add display: block; to your media query to center the image.
#media only screen and (max-width: 599px) and (min-width: 0px) {
.globes {
display: block;
width: 159px;
margin: 0 auto 0 auto;
}
}

Twitter Bootstrap Nav bar

http://www.ontargettdesign.com
Hi,
I am having problem with the navigation bar and the logo when the webpage is resized to ipad size:
[IMG]http://i60.tinypic.com/4r95qo.png[/IMG]
How can I code it to be a narrower height, I feel I have tried everything!
Any help would be very much appreciated.
Thanks in advance

Your Media Queries are clipping the image. This is because the div you have is smaller than the background image being used. If you remove the "width" & height" the logo will display properly. To view this. Make you browser smaller to see the clipping occur (Because of #media). Right click on the logo and "inspect element". On the right or bottom it will show you the css that is applied to this image. You can toggle the css to see how the code effects your image.
either add background-size:contain; to both of the follow or remove the width and height.
#media (max-width: 979px) and (min-width: 769px)
.navbar-brand {
height: 32px;
width: 132px;
}
&
#media (max-width: 768px)
.navbar-brand {
height: 32px;
width: 132px;
}
To change make the navbar height the same across all media widths you will still have to mess with the media widths. Your standard height is "height: 76px;".
The first CSS is for the smallest possible screen
#media (max-width: 768px)
.navbar {
height: 76px; /* add this */
}
This is the second smallest screen (for tablets). You will not to get rid of the clear:both that is sending the navigation to the second line
#media (max-width: 979px) and (min-width: 769px)
.navbar-collapse {
float: none;
clear: both; /* DELETE THIS */
height: 100px; /* You can change this to 76px if you want to be consistent */
}

Resources