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.
Related
I have a React app and I want to hide certain buttons from the header when viewed from a small device. I am styling everything through Styled Components.
I am trying to make a media query like this, to hide the button if the screen is greater than 700px:
export const BigScreenButton = styled(Button)`
color: white !important;
border: 2px solid white !important;
border-radius: 3px !important;
padding: 0 10px;
margin-left: 10px !important;
#media screen and (max-width: 700px) {
display: none;
}
`;
However this is not working (and I can understand why from a CSS point of view)...I am trying to find for Styled Component relevant examples but was not successful.
This should work correctly except:
I am trying to make a media query ... to hide the button if the
screen is greater than 700px:
You should use min-width
#media screen and (min-width: 700px) {
display: none;
}
Also, related article.
So I confirmed that my media query is actually right. The reason it did not work is because styled-components was simply ignoring it. I overrode the default behaviour as follows:
export const BigScreenButton = styled(Button)`
color: white !important;
border: 2px solid white !important;
border-radius: 3px !important;
padding: 0 10px;
margin-left: 10px !important;
#media screen and (max-width: 700px) {
display: none !important;
}
`;
So I've seen that there is a different css called depending on how large the screen is.
Example normal size:
Note the red bar does not have any margin-bottom and the text is custom css
(provided in an extra css file, not bootstrap.css)
Example tiny size:
Note that the css I have added is basically gone.
How can I fix this?
I thought it was something with
#media (max-width: 767px)
But after adding this in the extra css file it doesn't get fixed.
This is the CSS I used:
#The red bar
.top .alert {
margin-bottom: 0px;
}
#The text css
.very-big {
color: #20F587;
font-size: 115px;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
font-weight: bold;
}
.title-very-big {
color: #20F587;
font-size: 75px;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
font-weight: bold;
}
.p-very-big {
color: #20F587;
font-size: 15px;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
font-weight: bold;
}
a url to inspect it would be helpful.
that said:
anything in #media (max-width: 767px) will not appear in the bigger version.
max-width styles won't appear on screens bigger than the setting (in your case 767px), and min-width styles won't appear until the screen is at least as big as the setting. so if the desired margin and text styles are only working at a large size, chances are it is because they are in a min-width query somewhere, not a max-width.
sidenote: if possible, it is better (and makes things so much easier) to remove unwanted styles instead of trying to override styles.
edit:
i found your site at http://mrblackdragonfly.com/404/
the .top .alert has a margin-bottom:0px;, but it is inside a (min-width: 768px) query. move it out of there and the margin problem should go away.
the same goes for your text style.
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/
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....*/
}
}
I have the following two media queries:
#media (min-width: 320px) and (max-width: 359px){
.hero-unit h1 {
margin-bottom: 0;
font-size: 0.2em;
line-height: 0.5em;
letter-spacing: -5px;
color: inherit;
}
.hero-unit p {
font-size: 0.2em;
font-weight: 10;
line-height: 0.5em;
color: inherit;
}
.hero-unit {
background: url("../img/now320.jpg");
height: 5em;
width: 15em;
padding: 0.5em;
margin-bottom: 2em;
background-color: #eeeeee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
h2 {
font-size: 2em;
font-weight: 20;
line-height: 0.5em;
color: inherit;
}
}
#media (min-width: 360px) and (max-width: 479px) {
.hero-unit h1 {
margin-bottom: 0;
font-size: 0.2em;
line-height: 1em;
letter-spacing: -5px;
color: inherit;
}
.hero-unit p {
font-size: 0.2em;
font-weight: 50;
line-height: 1em;
color: inherit;
}
.hero-unit {
background: url("../img/now360b.jpg");
padding: 1em;
margin-bottom: 2em;
height: 10em;
width: 18em;
background-color: #eeeeee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
h2 {
font-size: 2em;
font-weight: 20;
line-height: 1em;
color: inherit;
}
}
I'm trying to figure out why the 320 width rule is not being applied at all to my HTML page, even though I've resized it using the responsive design tool in Firefox to have a width of 320px.
I checked the CSS styles using Firebug to see what's going on. I only see the #media (min-width: 360px) and (max-width: 479px) part being applied. That is, its not a case where the CSS rule I think should be applied is being overwritten. What's happening is the rule is never applied at all. Why?
Sometimes browsers just simply don't allow for a viewport to be smaller than a certain size, and I think that line is down around 360, so it may simply not be registering, even with the tool you mention. I can't say, because I'd need to see the live example.
Have you checked the site on an actual mobile device, or at least an emulator? The Opera Mobile Emulator is pretty easy to use.
As an aside, if you want to work mobile first - there is the idea of writing your CSS for 320 devices first, with no media query, as the 'baseline' experience. That is where you specify font families, colors, generally applied styles. Then you add in media queries to work on larger and larger sizes, and that is where you specify changes in layout and text size. The point being - don't wrap your 320-359 styles in a media query as it will be the basic experience for everyone.
If you wish the 320px rule to be applied for all the page you need to write it like this
#media (min-width: 320px)
without any and (min-width....) after it