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....*/
}
}
Related
I have a navigation menu; whose font-size is 10px for small device, 20px for medium and 50px for large device. Unfortunately I am new to tailwind css.
Now I have written the css as below. Is this correct way, do I need to convert the pixel to rem
.nav-link {
font-size: 10px;
}
#media (min-width: 768px) {
.nav-link {
font-size: 20px;
}
}
#media (min-width: 1024px) {
.nav-link {
font-size: 50px;
}
}
If you want to use your custom style, just change from 20px to 10px on the first declaration...
.nav-link {
font-size: 10px;
}
Otherwise, you can use TailwindCSS classes to have almost the same sizes
<a class="text-xs md:text-xl lg:text-5xl">link</a>
Excluding the xs, which is around 12px, the other sizes are the same.
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.
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/