I am trying to use media queries to make my layout responsive to the screen size. I'm just testing it out at the moment and I can't for the life of me get the method to work. I simply set up a media query that's supposed to change the background color of my links to red when the screen goes below 480px, but it just doesn;t work when I shrink my screen.
You can see this in action at http://www.noellesnotes.com
Any help would be appreciated.
Here's the relevent code:
HTML:
<div class="site-navigation">
About
Work
<div class="site-title">Noelle Devoe</div>
Blog
Contact
</div>
CSS:
.site-navigation a{
width: 125px;
float: left;
padding: 50px 0 50px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
}
.site-navigation a:hover{
font-weight: bold;
background-color: rgb(242,168,134);
color: rgb(255,255,255);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}
#media only screen and (max-device-width: 480px) {
.site-navigation a{
background-color: red;
}
}
change your max-device-width to max-width
#media only screen and (max-width:480px){
.site-navigation a {
background-color: red;
}
}
Should do the trick for you. Also a great page to look at is the media queries page on MDN
USE IT LIKE THIS:
#media only screen and (max-width: 480px){
}
this would be a good read http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Related
This should be basic but I am struggling with it:
My markup is simple:
<p>
sort / search all events in United States
</p>
And this CSS works well - BUT - in a small screen there is too much text so I am just trying to lower the size of the font, should be simple enough but I can't get it to work.
.button {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
font-family:inherit;
color: #393939 !important;
font-size: 16px;
background: #c8d6e5;
padding: 8px 18px 8px 18px;
border: solid #ffffff 2px;
text-decoration: none;
text-transform: uppercase;
}
.button:hover {
background: #9facb5;
text-decoration: none;
}
#media screen and (min-width: 1251px) {
.button {
font-size: 12px !important;
}
}
Am I doing something obviously wrong here?
Thanks
#media screen and (min-width: 1251px) will only apply styles at 1251px wide and up. If you want to apply styles to smaller screens only, you'll need to use max-width instead, which has the opposite effect.
Alternatively, you could apply the smaller font size by default without a media query, and then use the min-width query to increase the size at larger widths.
When I try to set the font size and then the screen size switches to mobile phone(320px) with media screen in my custom CSS. The value still is the value on non media-screen but does not work.
My CSS:
#media only screen and (min-width: 320px) {
.card{
}
.card .title{
color:black;
border-bottom:1px solid #f5f5f5;
margin-bottom:2px;
}
.card .title a{
font-weight: bold;font-size: 10px;color:#949393;
} }
.card .title a{
font-weight: bold;
font-size: 14px;
color:#949393;
}
The problem is that the declaration of the normal style is placed after the definition with the media query. Although the media query style is being applied, it is also being overridden with the normal style which is placed further down the stylesheet.
Here is your fixed code
#media only screen and (min-width: 320px) {
.card{
}
.card .title{
color:black;
border-bottom:1px solid #f5f5f5;
margin-bottom:2px;
}
.card .title a{
font-weight: bold;
font-size: 10px;
color:#949393;
}
}
when i have this Code
HTML
<div id = 'bl'>
</div>
CSS
#bl {
font-size: 12px;
Color: #ff0000;
......
}
#media only screen and (min-width: 0px) and (max-width: 799px)
{
#bl {
border: 1px solid #ff0000;
}
}
it's only an example.
which type of Code does it use when the Screen size is between 0 and 799? both or only the one in media query without the other "bl" (font-size...)?
The styles get applied from a top down approach. So, the first style would be read and computed, then the media query styles would overwrite the styles above if the screen is within 0 and 799px.
Both.
but if you had :-
#bl {
font-size: 12px;
Color: #ff0000;
...
border: 2px solid red;
Then the border in media query would then override.
I am creating a website using Bootstrap and want to resize the Navbar height when the browser screen is min-width: 268, I am using a media query to do this but for some reason the media query changes the height of the Navbar before the screen has been made smaller, can someone please help, code is below.
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 105px;
}
#media only screen and (min-width: 268px) {
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 50px;
}
}
If you want this style to apply when the width is LESS than 286px, use max-width. Try this:
#media only screen and (max-width: 268px) {
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 50px;
}
}
on my one-page website the navigation looks bad as it takes 2 lines on a mobile device.
Here is the code
#navigation {
font-family: 'Open Sans', sans-serif;
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: gray;
}
The issue here is that on a mobile device the navbar becomes to small in width for the [now large] text to fit on the navbar. In order to fit the text on the navbar you'll need to either shrink the font size (and as others have stated the padding) when a small-screened device is running your website, or you'll need to change the layout of your navbar. In order to detect the screen size you'll need to add something like the following to your CSS.
#media only screen and (max-width: 999px) {
/* rules that only apply for canvases narrower than 1000px */
}
#media only screen and (device-width: 768px) and (orientation: landscape) {
/* rules for iPad in landscape orientation **/
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* iPhone, Android rules here */
#navigation a{
font-size: 8px;
padding: 0 0 0 0;
}
}
Because of padding-left, and padding-right, it takes of 30 px for each anchor (a).
You need to use some script to detect the mobile browser, and change the padding to lower value.
P.S.: there may be a more common solution for your problem.
1st cause:: lots of padding on left and right..total 30px.. 15 on each..
navigation a { font-size: 14px; padding-left: 15px; padding-right: 15px;
reduce it...
second:: it seems that you took that picture after resizing the browser...css doesnot have effect on browser resize..i think jsp has..
third:: reduce the padding(better use either padding-left or padding-right) ..it will solve the problem temporaliy..but as i said css(or media query) doesnot work on browser resize..if you want that you will need jsp ...but you can declare different css for different screen with different width like ::
for <div class="abc"></div>
.abc{/*...style for >1000px screen...*/};
#media only screen and (max-width: 1000px) {
.abc{
/*.... style for <1000px screen....*/
}
}