Simple bootstrap jumbotron...
.jumbotron-page {
height:300px;
}
I need the height to change to 100px when on mobile/small devices so i get this...
.jumbotron-page {
height:100px;
}
I just can't get my media queries right to achieve this.
Any help appreciated.
Assume your mobile devices have screen sizes less than ~700px
Include the following meta:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
And the media query:
#media all and (max-width: 700px)
{
.jumbotron-page
{
height: 100px;
}
}
Related
Let me start over, as I clearly didn't post my question correctly.
I have a site with media queries and none of my queries are working. This is a Wordpress site build on the Genesis platform.
Header:
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
CSS with query:
#media only screen
and (min-device-width : 775px)
and (max-device-width : 1024px) {
#header {
float: none;
}
.another_site_inner-wrap {
float: none;
}
}
I'm not sure what else you would need to see to help guide me in the right direction. I'm a bit of a newbie, so please excuse my lack of knowledge.
OPTION 1
#media only screen and (max-width: 775px) and (min-width: 1024px) {
#header, .another_site_inner-wrap {
float: none;
}
}
OPTION 2
#media only screen and (max-width: 1024px) {
#header, .another_site_inner-wrap {
float: none;
}
}
If you want the #header, .another_site_inner-wrap to float: none; in 1024px You don't need to re-declare the same CSS on 775px. All CSS under 1024px will be used from 1024px below.
321px is too small try 700px to test it first, if you are trying to change it when you shrink the window then use max-width.
Try changing the border and color of a div on a certain with of the page (best way to test and see the media query in action). the media query should work so the problem is how you are implementing it
Example:
#media only screen and (max-width: 700px){
div{
border-color:red;
border-width: 10px;
border-style: solid;
}
}
Read this and play with different querys :
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Set this at your <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
i'm newbie and i have a site, i want to make a responsive design, it is responsive for mobile but not responsive on tablet, i want create tablet design like pc layout not mobile, can you help me how solved this problem? maybe meta viewport and css wrong code, how many px to create min or max media width?
this is my dummy site
http://silanycorp.com/a
and this site for check responsive layout
http://ami.responsivedesign.is/#
meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
CSS code
#media (max-width: 768px) {
.container{
padding:0;
}
.logo{
padding-left:0;
}
.hide-on-desktop{
display:block
}
.header-wrapper{
padding: 0;
}
.header-outer{
}
thanks for your help :)
You can have multiple stylesheets loaded based on the width of the viewport the user has.
This can be accomplished with the following tag:
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
You can also set it in the stylesheet with something like this:
#media all and (max-width: 699px) and (min-width: 520px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
Here is a good article on the process: http://css-tricks.com/css-media-queries/
I'm trying to allow my webpage to react accordingly to the media query attributes. I have searched all over the web and found this universal meta code
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
and in my CSS i change accordingly
#media only screen and (max-device-width: 720px) {
#homebutton input[type=image] {
position:absolute;
left:0%;
top:0%;
margin: 0px;
height:700px;
}
I tried it on my opera mobile emulator on both different mobile interface
WXGA Landscape 1280x800
HD Potrait 720x1280
But the homebutton of mine still remain the same size as it originally is like below
#homebutton input[type=image] {
position:absolute;
left:0%;
top:0%;
margin: 0px;
height:70px;
}
If your 700px rule (in the #media block) is above the 70px rule, and the latter applies outside of any #media blocks, then that will override your 700px rule for all media.
In order for your #media block to override the general rule, you need to move it beneath it in your stylesheet.
See my answer to this question for an explanation.
You can try to search for responsive layout as well and what I suggest is to target all the devices with the width element so try use this:
#media (max-width: 720px) {
#homebutton input[type=image] {
height:700px;
}
}
and unless you want to change some attributes on the elements you don't need to specify it in the media query.
I'm just getting into media queries, but this first issue is driving me crazy I've spent hours on it.
I've tried to following:
#media screen and (max-device-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
#media (max-device-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
#media screen and (max-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
I load it at the end of my head file and when i look at it in firebug it's there.
Then I go to an object .logothingy and it is not even getting the styling when i reduce my window size down small. That is to say it's not even getting it and then being overwritten, it's just not getting it at all. Going insane. Please help.
Ok I'm even doing this:
.logothingy {
border:1px solid;
}
#media screen and (max-width: 480px){
.logothingy {
z-index: 100;
display:none !important;
}
}
and it's putting the border and not doing the rest of it.
I have this in the head
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Update2: I changed it to 780px and it works, but when it's at 480px it can shrink all the way down to nothing without getting the styling.
I had the same dramas and noticed that i had missed this:
<meta name="viewport" content="width=device-width">
in the head of my index page. Added it and media queries all kicked in.
This is the correct one
#media screen and (max-width: 480px){
}
Try to put inside only .logothingy instead of div.logothingy and let us know if worked
Im creating a mobile adapted Wordpress website. Im using media queries to link to a mobile css file if viewed on a mobile device. When Im posting posts in my blog the images will obviously be to large for the mobile screen. How should I solve it?
You can scale your images by using below css.
img{
max-width:100%;
}
If you have not used viewport in you head tag then use this one:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" />
The above code will scale the site in device viewport, If you want to stop zoom set user-scalable=No
A good solution is to create 'buckets' for different screen sizes and use different background images based on media queries.
For example, you could create 4 buckets with image widths:
400px for 300-500px
800px for 500-800px
1200px for 800-1200px
1400px for 1200px+
In CSS, you could create media queries like so:
#elem {
max-width: 100%;
}
#media all and (min-width: 300px) and (max-width: 500px) {
#elem {
background: url(../images/logo-400.jpg) left center no-repeat;
}
}
#media all and (min-width: 500px) and (max-width: 800px) {
#elem {
background: url(../images/logo-800.jpg) left center no-repeat;
}
}
#media all and (min-width: 800px) and (max-width: 1200px) {
#elem {
background: url(../images/logo-1200.jpg) left center no-repeat;
}
}
#media all and (min-width: 1200px) {
#elem {
background: url(../images/logo-1400.jpg) left center no-repeat;
}
}
Using both 'min-width' and 'max-width' ensures that your device downloads only the images which fit the particular 'bucket'.