I have this html that I cannot edit:
<div id="menu">
Home |
Meet Our Physicians |
Services |
</div>
I have to make it responsive and when when on mobile I want to delete the |
How can I target it? Something like:
#media screen and (max-width:480px){
element{
display:none;
}
}
Try this:
#media screen and (max-width:480px) {
#menu > a{
margin-right: -10px; /* getting the elements closer */
}
#menu {
color: transparent; /* making the open text's color transparent */
}
}
Working Fiddle
The only way to emulate this (CSS cannot target text that is not part of an element, unfortunately), is to target the containing element and then override the styling in the descendant <a> elements:
#media screen and (max-width:480px){
#menu {
font-size: 0;
}
#menu a {
font-size: 16px; /* or whatever */
margin: 0 0.5em; /* or whatever, to restore some spacing between elements */
}
}
Edit:
Maybe something like that:
#media screen and (max-width:480px){
#menu {
text-indent: -9999px;
font-size: 0px;
}
#menu a {
text-indent: 0px;
font-size: 14px;
}
}
Related
I do not want to repeat the same property all the time on my CSS.
In my case, I have three media queries in which I change the property of padding of a specific element and after I need to put it as the beginning:
#media (max-width: 1000px){
ul > a{
padding-top: 20px;
padding-bottom: 20px;
}
}
#media (max-width: 750px){
ul > a{
padding-top: 16px;
padding-bottom: 16px;
}
}
#media (max-width: 500px){
ul > a{
padding-top: 20px;
padding-bottom: 20px;
}
}
As you can see, I have to put the same code on the first and on the third one media query and I would like to reduce the amount of lines of my CSS.
I would like to wrap these lines into a variable or something similar:
ul > a{
padding-top: 20px;
padding-bottom: 20px;
}
and use them in the whole CSS each time I need it.
I found that there is an experimental technology to create variables on CSS but that it has not been stabilized yet and it does not have a full browser support.
Thus, is there a method to use more than one line on CSS without repeating them?
Thanks in advance!
Just define the common rule without a media query and then use media queries to override it as necessary, like so:
ul a{
padding:20px 0;
}
#media (max-width:750px){
ul a{
padding:16px 0;
}
}
Alternatively, add min-width to your media queries and create a new one to define all the common rules in, like so:
#media (max-width:500px),(min-width:751px) and (max-width:1000px){
ul a{
padding:20px 0;
}
}
#media (min-width:501px) and (max-width:750px){
ul a{
padding:16px 0;
}
}
You could use one query with min and max width Fiddle, also only li element can be direct child of ul element (i used color instead of margin form demo)
ul a {
color: blue;
}
#media screen and (min-width: 500px) and (max-width: 750px) {
ul a {
color: red;
}
}
<ul>
<li>Lorem</li>
<li>Lorem</li>
</ul>
I am trying to make my site mobile accessible. The problem I have is with the nav. I believe it has to do with the class being used on the nav. So what I want to do is remove the class when a mobile device is being used.
I have it in a media query and have changed a number of things to make it look correct on mobile. I read that it is possible to remove a class using
$( "p" ).removeClass( "myClass yourClass" );
I believe mine would be
$( "nav" ).removeClass( "navigation" );
but when put in the stylesheet and put through a css validator, I get
Lexical error at line 104, column 4.
Encountered: "(" (40), after : "$" ( "nav" ).removeClass( "navigation" );
I have no idea how to, or even if I can, fix this. Other pages I have read say this is impossible to do so I am getting conflicting information.
Here is me trying to post code.
This everything in my CSS affecting my nav.
nav ul { list-style-type: none;
margin: 0;
padding: 0; }
header nav a { text-decoration: none;
padding: 10px;
display: block;
background-color: #a8e6a8;
border-bottom: 1px solid #228B22; }
nav a:link { color: #228B22; }
nav a:visited { color: #568b22; }
nav a:hover { color: #869DC7;
background-color: #EAEAEA; }
.navigation { float: right;
width: 200px;
font-weight: bold;
letter-spacing: 0.1em; }
Here is my unfinished media query.
#media only screen and (max-width: 1024px) {
body { margin: 0; padding: 0; background-color: #fff; }
#wrapper { width: auto; min-width: 0; margin: 0; }
h1 { margin: 0; text-align: center; font-size: 2em; line-height: 200%; }
nav { float: none; width: auto; }
nav li { display: inline-block; }
nav a { padding: 1em; border-style: none; font-size: 1.2em; }
nav ul { text-align: center; padding: 0; margin: 0; }
main { margin: 0; padding: 0 1em; font-size: 90%; }
dd { margin-bottom: 1em; }
footer { margin: 0; }
.navigation { float: none;
width: auto;
letter-spacing: 0.1em; };
}
Actually, you could add a class with jQuery but I don't believe this is the best way to achieve what you need.
What I have seen many designers doing is having two navs. One for big screens and another for small screens. It can be very handy, as you can work with different html codes too. For example, you can add FontAwesome icons to your mobile nav, add or remove links, etc. So, your html would look like this:
<nav class="nav-big">
<ul>
<li>Link 1</li>
<li>Link 2</li>
...
</ul>
</nav>
<nav class="nav-small">
<ul>
<li><i class="fa fa-plus"></i>Link 1</li>
<li><i class="fa fa-minus"></i>Link 2</li>
...
</ul>
</nav>
Then, your CSS would look like this:
.nav-big {
...your styles
}
.nav-small {
...your styles
}
#media screen and (min-width: 1024px) {
.nav-small {
display: none;
}
}
#media screen and (max-width: 1023px) {
.nav-big {
display: none;
}
}
You can see something like this working in my Blog and also in another website I developed.
Hope to have helped. If I did, please mark the answer as useful or correct! Thanks!
Welcome on board! Please try to be more concise on your questions :-)
My answer:
The code you're posting is JavaScript. jQuery, to be precise. This certainly doesn't work in CSS.
But the better solution is to use the media query not to remove a class, but to alter it. Example:
.foo { width:200px; }
#media print
{
.foo { width:100px; }
}
EDIT after the CSS was added to the question:
The trailing ; looks like a syntax error to me: Change letter-spacing: 0.1em; }; to letter-spacing: 0.1em; }
Other than that the media query looks good in principle. Try adding background:red to see if it works at all :-)
$("nav").removeClass("navigation"); is JavaScript, not CSS. Conceptually, you can not add/remove a class in CSS - it is only a style description language.
What you can do in CSS, however, is show/hide content for a specific device width ("breakpoint"):
.navigation {
display: block;
/* your style definitions for nav */
}
#media only screen and (max-device-width: 800px) {
.navigation {
display: none;
}
}
I have a dropdown menu on which links get bigger when the page is scrolled. This unfortunately then threatens to drop the bottom-most ones off the foot of the page as a result.
The site is http://www.jswhite.co.uk/
Does anyone know how to prevent this from happening?
your javascript code adding class "et-fixed-header" at header tag and in your css you using below code.
#media only screen and (min-width: 981px)
.et-fixed-header #top-menu li a {
font-size: 22px;
}
So after adding et-fixed-header class it changing menu text. change your css.
.et-fixed-header #top-menu li a {
font-size: 16px;
}
here is the problem
#media only screen and (min-width: 981px)
.et-fixed-header #top-menu li a {
font-size: 22px;
}
you used #media .. Try deleting this statement
you can also just paste this css code
.et-fixed-header #top-menu li a {
font-size: 16px !important;
}
set font size important to maintain it while scrolling
#top-menu li li a {
font-size: 16px!important;
line-height: 1.1em;
}
add overflow as scroll
#main-header .nav li ul {
background-color: #f1f1f1;
overflow: scroll;
}
I cannot figure out why my bootstrap dropdown menu seems to have an extra line on top and line on the bottom--with nothing in them. Granted, I have made my navbar 150px for all resolutions but that doesn't explain the extra padding on the bottom. This is my first bootstrap project and I have searched high and low for an answer to this. You have to narrow the window to less than 767 pixels for the dropdown option to appear.
This is the page: http://www.ashlandlockandsafe.com/index3.html.
In the CSS, I have tried to address it with the following:
#media screen and (max-width: 767px) {
.navbar-header{
height:150px;
}
.navbar-brand, .navbar-nav > li > a {
line-height: 30px;
height: 45px;
padding: 0px;
margin-top:0px;
margin-left:10px;
}
.well {
font-size:2.5em;
text-align:center;
text:#000;
padding:0;
border:#000 solid 4px;
background-image:url(../images/metal.png);
background-image:no-repeat;
background-size:contain;
background-position:center;
}
.carhelp {
margin-top:15px;
}
h1 {
text-align: center;
font-size: 30px;
}
.phonetxt {
font-size:36px;
text-align:center;
}
But it still has what appears to be an extra row on the top and bottom. Any ideas how to address the dropdown itself?
In website, fixed header has a padding .navbar-fixed-top .nav{60px 0px} causing the problem.
so solution is media queries
#media (max-width: 480px) {
.navbar-fixed-top .nav {
padding: 0px 0px;
}
}
so on devices like mobile, it will over-ride the default .navbar-fixed-top .nav selector property.
More information about media-queries
I am creating a web site for a friend and is strictly practice for me. So far I have got the banner w/ logo to fit any screen, but now I am adding buttons so a user can navigate through out the site. When zooming in or out the buttons go all over the place. I am using an external CSS sheet to help format my HTML. Here is my CSS3 code
/* W & W Hydrographics, LLC. */
/* Robert W. Anderson HTML 5.0 */
.mybutton {
display: inline-block;
position: relative;
margin: 10px;
padding: 0 20px;
text-align: center;
text-decoration: none;
font: bold 30px/35px Arial, sans-serif;
box-shadow:#000 4px 4px 5px;
}
/* Our Gallery */
.gallery {
position:absolute;
left:5%;
top:5%;
color: #F5DA62;
background: #3F403D;
}
/* Available Patterns */
.patterns {
position:absolute;
left:300px;
top:230px;
color: #F5DA62;
background: #3F403D;
}
/* Contact Us */
.contact {
position:absolute;
left:650px;
top:230px;
color: #515151;
color: #F5DA62;
background: #3F403D;
}
body {
background-size: 100%
}
You can use CSS3 to find the width of the screen and adjust the size of the buttons(again, according to the size).Here is a small explanation of an example just so you can unserstand.Suppose I had a button with id #button with a 300px width like this-
#button{
width:300px;
}
If i wanted to change the width to 100px in mobiles(mobiles have average width 470px;) I can do it like this-
#media (max-width: 470px) {
#button{
width:300px;
}
}
You can use the same logic to adjust size of other elements and even multiple elements at the same time like this-
#media (max-width: 470px) {
#button{
width:300px;
}
#button2{
width:300px;
}
#someelement{
color:#C30;
}
}
If you didnt understand a part of my answer, just comment. I am free to answer more doubts.