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;
}
`;
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 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;
}
}
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.
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....*/
}
}