I have two divs that are 368px x 228px sitting next to each other but each time I try to apply media queries and run a few tests, it doesn't seem to be working at all. How do I go about resolving this issues.
See my code below:
<style type="text/css">
.block-content-right {
background-color:#e0e620;
flex:1;
}
#media (max-width: 600px) {
.field__item {
width: 100%;
}
}
#media (min-width: 400px) {
.field__item {
width: 100%;
}
}
</style>
<div class="block-content-right">
<p>The people the people the people</p>
</div>
<div class="field__item">
<img src="blah blah.jg";>
</div>
Need some help guys. Thank you.
Your media queries are working, but at least one of them is always going to be active.
Perhaps what you wanted was this:
#media (max-width: 600px) and (min-width: 400px) {
/* This will be active if the screen is between 600px and 400px */
.field__item {
width: 100%;
}
}
Or maybe this:
#media (max-width: 400px) or (min-width: 600px) {
/* This will be active if the screen is NOT between 600px and 400px */
.field__item {
width: 100%;
}
}
Note: For testing purposes, you may want to use a different CSS rule. With the code you are showing, the "width: 100%;" doesn't do anything because divs have 100% width by default. Try using "border:5px solid red;"
Code to stack elements if the page is narrow: (Going into full screen causes the elements to be placed side-by-side)
#media (min-width: 800px) {
.half-width {
display: inline-block;
width: 49%;
}
}
<img class="half-width" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Zinnia_elegans_with_Bombus_01.JPG/640px-Zinnia_elegans_with_Bombus_01.JPG" />
<div class="half-width">Here is some text. More and more and more text. And more and more text. And more and more text. And more and more text. And more and more text. And more and more text. And more and more text.</div>
Related
I have 4 images and i want them to be displayed in one row at 1200px
then 992px and lower i want 2 pictures displayed in one and other 2 should go in next row and at 768px and lower i want one picture in one row.
Problem occours when browser is at less than 992px chrome just loads 768px rules.
HTML
<section class="gallery">
<div class="container">
<img src="img/g1.png" alt="">
<img src="img/g2.png" alt="">
<img src="img/g3.png" alt="">
<img src="img/g4.png" alt="">
</div>
</section>
CSS
#media (min-width: 768px) {
.gallery img {
width: 51%;
}
}
#media (min-width: 992px) {
.gallery img {
width: 49%;
}
}
#media screen and (min-width: 1200px) {
.gallery img {
width: 24%;
}
}
Problem occours when browser is at less than 992px chrome just loads 768px rules.
Sure, because the 768 rule contains min-width: 768px, the 992px rule contains min-width: 992px
So on a 900px wide screen min-width: 768px rules will apply, since it's less than min-width: 992px
I suppose you should use max-width instead.
I find it easiest to start from the smallest screen size and work my way up (that's the way that Bootstrap does it). So, your smallest screen size doesn't need a media query since it's what will be set by default.
.gallery img {
width: 51%;
}
Then, you can put your next rule in the min-width:768px rule. Once the screen hits 768px, switch to two images per row
#media (min-width: 768px) {
.gallery img {
width: 49%;
}
}
Finally, move your last rule to the min-width:992px rule. Once the screen hits 992px, switch to all four images in one row
#media (min-width: 992px) {
.gallery img {
width: 49%;
}
}
So, all together
.gallery img {
width: 51%;
}
#media (min-width: 768px) {
.gallery img {
width: 49%;
}
}
#media (min-width: 992px) {
.gallery img {
width: 24%;
}
}
Check out this codepen for a demo: https://codepen.io/noahjwhitmore/pen/MrBdMY
I have this code . When i resize the browser to min-width: 480px it doesn't change the background color to blue and width to 100px
this is my code so far:
#media screen and (min-width: 480px) {
.boxcontainer {
background-color: blue;
width: 100px;
}
}
.boxcontainer{
width: 1300px;
background-color: green;
height: 200px;
}
<div class="boxcontainer">
</div>
Thank you
Switch the order of the CSS rule, Change your CSS into
.boxcontainer {
width: 1300px;
background-color: green;
height: 200px;
}
#media screen and (min-width: 480px) {
.boxcontainer {
background-color: blue;
width: 100px;
}
}
As in this JSFiddle example. the background is blue as long as the width is not less than 480px, otherwise it turns green.
IF by any chance you meant to do the opposite, because .boxcontainer{width:1300px} makes me think you want that , then just change the media query break point to #media screen and (max-width: 480px) instead of #media screen and (min-width: 480px).
You can see the second option in this JSFiddle
I'm using Angular Typeahead with a custom search-template, and for some reason the custom template won't respond when I set it's width to "100%".
I've also tried using jQuery to change the height, but it won't respond to this either, which leaves me with the last choice of creating media queries for every width I need.
I'm using SASS, and my question is: Is there a way of making the width of a div 100% without using the "100%" property?
My code looks like this:
<script type="text/ng-template" id="customTemplate.html">
<a class = "searchTemplate">
<span ng-bind-html="match.model.name | typeaheadHighlight:query"></span><br>
<span ng-bind-html="match.model.ticker | typeaheadHighlight:query"></span>
</a>
</script>
Working SASS/CSS:
.searchTemplate {
#media screen and (min-width: $break5) {
width: 500px;
}
#media screen and (min-width: $break4) and (max-width: $break5) {
width: 500px;
}
#media screen and (min-width: $break3) and (max-width: $break4) {
width: 400px;
}
#media screen and (min-width: $break2) and (max-width: $break3) {
width: 300px;
}
#media screen and (min-width: $break1) and (max-width: $break2) {
width: 200px;
}
}
Not working SASS/CSS:
.searchTemplate {
width: 100%;
}
Please help me solve this issue.
try this css:
left:0;
right:0;
I am trying to make container fixed size 750px for all sized windows.
Here is HTML:
<div class="container">
<div class="thumbnail" >
..........<br/>
..........
</div>
</div>
and custom CSS:
#media (min-width: 1200px) {
.container {
width: 750px;
}
#media (min-width: 992px) {
.container {
width: 750px;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
But the problem is when I am resizing window from big to small at some point size of thumbnail is getting a little larger and then reverses to its initial size.
Here is a fiddle http://jsfiddle.net/Wy22s/718/ . You can just resize browser window or slide inner window in fiddle itself to left and then to right to reproduce this behavior.
I have tried to add another div with row class. Tried combinations with col-sm, col-md etc, but I can not manage to achieve desired behavior. How can I fix this so the container/thumbnail size stays the same?
you forgot to close the #media brackets.
#media (min-width: 1200px) {
.container {
width: 750px !important;
}
}
#media (min-width: 992px) {
.container {
width: 750px !important;
}
}
#media (min-width: 768px) {
.container {
width: 750px !important;
}
}
.container{ width: 750px !important;}
.thumbnail{ width: 750px !important;}
I am using media queries as below
#media (min-width:100px) and (max-width:639px)
{
}
#media (min-width:640px) and (max-width:960px)
{
.box {background-color:red;}
}
#media (width:768px)
{
.box {background-color:green; }
}
#media (min-width:961px)
{
}
I want to specifically target some div element for screen 768 pixel so that it appears exactly as i want for example in general i want to overwrite css defined in #media (min-width:640px) and (max-width:960px) by css which is targeted for screen 768 #media (min-width:768px)
At present it is still showing me box as red while it should be red, I am not sure how css is complied i defined it after the second media query so that it will over right it.
How can i target certain element using media queries for specific devices
example :http://jsfiddle.net/X43Et/
Update:
I am not sure what exactly was wrong with it put i copy pasted #media (width:768px) { part from fiddle & it works in my actual page.
May be some invisible typo mistake..
This is just an example of media queries You would want to have your normal css before the media queries
#gallery-1 img {
width:375px;
}
#media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
#media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
#media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
#media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}
And when you're using media queries, you want to specify that you want the screen size so you use screen after #media. I hope this is what you were looking for and will help you!
Here is a small example script I made
<style>
#box {
width: 500px;
height: 200px;
background: yellow;
border: 1px solid #000;
}
#media screen and (max-width:1000px) {
#box { background: red; }
}
#media screen and (min-width:1000px) and (max-width:1200px) {
#box { background: green; }
}
#media screen and (min-width:1200px) and (max-width:1400px) {
#box { background: blue; }
}
</style>
<div id="box">
</div>
On JSFiddle the screen size isn't the whole screen, it's the small box the preview is in so you would need to make the sizes smaller to see the effect, here is a DEMO resize your screen browser to see the preview.