I have my media queries at the bottom of my styles, I'm trying to make my grid be 50% of the screens width, however the 50% media query never seems to fire on a phone (iPhone 6s) however will on a browser re-size and I'm not sure why.
/* Media Queries*/
/* Max Width 1250px */
#media only screen and (min-width: 761px) and (max-width: 1000px) {
.boxes {
width: 33.3%;
}
}
/* Max Width 750px */
#media only screen and (min-width: 501px) and (max-width: 760px) {
.boxes {
width: 50%;
}
}
/* Max Width 500px */
#media only screen and (max-width: 500px) {
.boxes {
width: 100%;
}
}
Try adding this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Here's the MDN article on viewport meta tags
Related
I have a mobile layout for the website I am building, where the image of a mobile screen has to always appear a till it's navigation buttons. Below is the design mockup of how the image should look
I am using media queries, the width of the image and margin-top to position it according to the mockup. But at certain viewports, the image appears completely above the screen, which is mostly due to the different viewports resulting in different values for the percentage based units I am using.
An example image of what I am trying to convey:
Is there a better approach to position this image, so that it always shows up to its navigation bar, so that the position is consistent atleast in a particular viewport range, if not every viewport?
Any help is appreciated.
the website for reference : https://hackertronix.com
.mobile-phone-img {
display: block;
margin: 3% auto 0;
width: 70%;
}
#media screen and (min-width:24em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 85%;
}
}
#media screen and (min-width:25.75em) {
.mobile-phone-img {
margin: 11.5% auto 0;
width: 66%;
}
}
#media screen and (min-width:30em) {
.mobile-phone-img {
margin: 11.5% auto 0;
width: 60%;
}
}
#media screen and (min-width:37.5em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 65%;
}
}
#media screen and (min-width:42em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 55%;
}
}
#media screen and (min-width:48em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 50%;
}
}
#media screen and (min-width:50em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 45%;
}
}
#media screen and (min-width:55em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 40%;
}
}
<div class="mobile-card">
<h2>
Tracker
</h2>
<a target="_blank" href="https://play.google.com/store/apps/details?id=tracker.gst.in.gsttracker">
<img src="images/getOnGooglePlay.png" class="mobile-button">
</a>
<img src="images/gst-tracker-pixel.png" class="mobile-phone-img">
</div>
Well known media query resolution for almost every devices.
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
#media (min-width: 1281px) {
//CSS
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
#media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
#media (min-width: 320px) and (max-width: 480px) {
//CSS
}
How could one go about creating a div, that would have a default size of XX%, however, if the screen gets too small it would switch into 100% size? I have tried using min-width property but the problem with this is that it will not be responsive after the min-width is reached and will overflow if the screen is even smaller.
You have to use #media queries. So let's say you have a <div> that should take up only 50% of the web page and then you need to show it full width once it enters mobile phone, say 640px width:
div {
width: 50%;
}
#media screen and (max-width: 640px) {
div {
width: 100%;
}
}
you must use #media for that like this :
#media screen and (min-width: 769px) {
/* STYLES HERE */
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px) {
/* STYLES HERE */
}
#media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
You can do it with #media queries, e.g.:
div {
width: 50%;
height: 100px;
border: 1px solid;
}
#media (max-width: 568px) { /* adjust to your needs */
div {width: 100%}
}
<div></div>
I have got a Bootstrap carousel with 3 images (480x320px). Width of carousel itself set to 480px. How to scale carousel when you resize browser size?
.carousel{
width: 480px;
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
Thanks!
You need to make the width of your .carousel class as 100%..
You need to make the below change to your CSS,
.carousel{
width: 100%;
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
However if you want keep them at 480x320px initially and want to handle them while the browser is getting resized, then you will need to go for media queries.
/* For devices which are smaller than 960 pixels */
#media only screen and (max-width: 959px) {
//Write your CSS here.
}
/* For Tablets */
#media only screen and (min-width: 768px) and (max-width: 959px) {
//Write your CSS here.
}
/* For all mobiles */
#media only screen and (max-width: 767px) {
//Write your CSS here.
}
/* Mobile Landscape Size to Tablet Portrait */
#media only screen and (min-width: 480px) and (max-width: 767px) {
//Write your CSS here.
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
//Write your CSS here.
}
Hope this helps!
It's possible that a simple width:100%; on the css, and apply img-responsive to it may fix it.
Let me know!
I have website that with several divs. One of those divs need to be a specific with but this can variabate between 2 width. Is it possible some how to get it to only allow 2 width?
Examaple:
With resolution of page >= 700px div width = 500px
when page resolution < 700px div width = 200px
Use css media query like #media only screen and (max-width: 300px)
when you add
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
When you add like this when width is 300px it will automatically change to rule you added
A simple example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Answer
#media screen and (max-width: 700px ) {
div{
width: 500px;
}
#media screen and (min-width: 700px ) {
div{
width: 200px;
}
Use media queries:
#media only screen and (min-width: 700px) {
.my-div {
width: 500px;
}
}
So I am having a noob issue, one that is annoying me greatly. So I have the following type of style sheet:
#content .post-content .row .col-md-6 .box-top {
background: #714f46;
padding: 10px;
color: #fff;
text-align: center;
font-family: "custom-script";
position: relative;
height: 52px;
font-size: 34px;
padding-top: 12px;
}
#media (min-width: 960px) {
}
#media (min-width: 768px) {
}
#media (min-width: 640px) {
#content .post-content .row .col-md-6 .box-top {
width: 453px;
}
}
#media (min-width: 480px) {
#content .post-content .row .col-md-6 .box-top {
width: 353px;
}
}
Now the issue is that anything over 641px will use the 640px rule. Even if the screen is 1920x1200. I think its because I don't have a width defined for the original element? if thats case, I slap a width on the original element of 453px:
#content .post-content .row .col-md-6 .box-top {
...
width: 453px;
}
But the problem is, its almost like the #media rule has precedence, because in the crhome inspector when the width is 1366px, it still uses the 640px rule instead of the width I just defined. Now I was thinking of, instead of doing: (min-width: xyzpx) I would use max-width but that seems to take a way the smooth scaling down affect that the client wants, they don't want it jumping between media sizes.
Should my element have a max-width of 453px to override the #media rule?
#content .post-content .row .col-md-6 .box-top {
...
max-width: 453px; /** or a min-width: 453px **/
}
Essentially my questions are:
Why is my #media rule overriding any other rule on the page. In this case why is it using the width in the 640 rule to apply to anything above when the original definition of the element in question does not specific a width?
And
Why is when I specify a width for that original definition of the element, that the #media rule, which defined a new width at 640px overrides it, especially when the windows width is say 1366px?
From what I understand your issue is that you want to apply the Non-Mobile First Method, and by using that you have to use the max-width instead of min-width
like this:
/*========== Non-Mobile First Method ==========*/
#media only screen and (max-width : 960px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 768px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 640px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 480px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 320px) {
/*your CSS Rules*/
}
or if you want to use the Mobile First Method then you should use min-width but this way:
/*========== Mobile First Method ==========*/
#media only screen and (min-width : 320px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 480px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 640px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 768px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 960px) {
/*your CSS Rules*/
}
Below is a snippet from what I understand it is what you are looking for:
#content .post-content .row .col-md-6 .box-top {
background: #714f46;
padding: 10px;
color: #fff;
text-align: center;
font-family: "custom-script,arial";
position: relative;
height: 52px;
font-size: 34px;
padding-top: 12px;
}
/*========== Non-Mobile First Method ==========*/
#media only screen and (max-width: 960px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 768px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 640px) {
#content .post-content .row .col-md-6 .box-top {
width: 453px;
}
/*your CSS Rules*/
}
#media only screen and (max-width: 480px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 320px) {
/*your CSS Rules*/
}
<div id="content">
<div class="post-content">
<div class="row">
<div class="col-md-6">
<div class="box-top">Something
</div>
</div>
</div>
</div>
</div>
Try reversing order of your media queries. Smallest min-width first.
Say your window width is 700px. Then (min-width: 960px) and (min-width: 768px) does not match and are skipped but both (min-width: 640px) and (min-width: 480px) do match styles inside these blocks are applied in order they appear in CSS file. And later styles override previous styles, e.g.:
p { color: green; }
p { color: red; }
Your p color would be red.
This live example may be a bit clearer: http://jsbin.com/yuqigedudi/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/* Default color when no media queries bellow match.
In this our case when window width < 200px */
p { color: black }
/* If window size >= 200px */
#media (min-width: 200px) {
p { color: red }
}
/* If window size >= 300px */
#media (min-width: 300px) {
p { color: orange }
}
/* If window size >= 400px */
#media (min-width: 400px) {
p { color: blue }
}
</style>
</head>
<body>
<p>
Resize this frame and see my color change!
</p>
</body>
</html>