I have many links on the page as part of a list.
I want to style each link with a different background-position based on a media query.
What I've Got So Far
a.firstLink
{
#media (min-width: 768px) and (max-width: 979px)
{
background-position:0px 0px;
}
}
a.secondLink
{
#media (min-width: 768px) and (max-width: 979px)
{
background-position:0px -100px;
}
}
This is fine, and works, but it means me having to do as many media queries as there are links, and there are a lot. Multiply this by the amount of media queries I'd like to do per link (3) and it's going to grow into some ugly CSS.
How is this solution?
#media (min-width: 768px) and (max-width: 979px) {
a.firstLink {
background-position:0px 0px;
}
a.secondLink {
background-position:0px -100px;
}
}
Does it work fine?
Second solution:
#media (min-width: 320px) and (max-width: 599px),
(min-width: 600px) and (max-width: 767px),
(min-width: 768px) and (max-width: 979px) {
a.firstLink {
background-position:0px 0px;
}
a.secondLink {
background-position:0px -100px;
}
}
Is this good?
Related
I am trying to create a click-to-call link in my webpage i have the following
<a class="mobile-only" href="tel:+534306464456"><p class="">Click Here to call us</p></a>
I want it to only display on mobile devices phones specifically
in my css i tried
#media (max-width: 991px) {
.mobile-only {
display:block !important;
}
}
.mobile-only{
display:none !important;
}
but it does not work is there a way to accomplish this?
.mobile-only {
display: none;
}
#media only screen and (max-width: 767px){
.mobile-only {
display: block;
}
}
This should work.
.mobile-only {
display: block;
}
#media screen and (min-width: 768px){
.mobile-only {
display: none;
}
}
Only move .mobile-only class to above to your media query, remenber that is cascading style sheet, this mean that media query will be place at the end of the file, or instead you can place .mobile-only inside of a media query that only affect desktop resolutions. By the way avoid using !important statement in your css.
.mobile-only{
display: none;
}
#media only screen and (max-width: 991px) {
.mobile-only {
display: block;
}
}
Other approach will be:
#media only screen and (max-width: 991px) {
.mobile-only {
display:block;
}
}
#media only screen and (min-width: 991px) {
.mobile-only{
display: none;
}
}
Why is custom background showing? Here is the css i have added that should work.
#media (min-width: 992px) {
body.custom-background {
background-image: none !important;
display: none; }
}
Link to the website: http://goo.gl/RgG2Ct (scroll down and you will se this strip that is only suppose to be on the mobile version)
You can try with
#media screen and (min-width: 992px)
try this code:
#media (min-width: 992px)
{
body
{
background-image: none !important;
}
}
thanks.
You need to clean things up a bit... try it like this:
#media screen and (min-width: 480px) {
body.custom-background {
background-image: none !important;
display: none;
}}
It seems you have an extra set of () and one misplaced }
Ive been looking all over and I cant find any solution to this. My media queries don't work on mobile devices but they work when I re size my screen.
YES I do have:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In the head of my document.
Here are what my media queries look like:
#media only screen and (max-width: 1100px) {
.r-menu {
display:inline;
}
.m-menu {
display:none;
}
}
#media only screen and (max-width: 900px) {
.res-full {
width: 100%;
}
}
Thanks.
Here is the whole code: http://scratchpad.io/marvelous-holiday-5460
Replace only screen with all
#media all and (max-width: 1100px) {
.r-menu {
display:inline;
}
.m-menu {
display:none;
}
}
#media all and (max-width: 900px) {
.res-full {
width: 100%;
}
}
screen is used for computer screens whereas all is used for all media type devices
Do you really need to use "only"?
I found that the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Why don't you try removing it?
Found the mistake Use min-width not max-width
/*If screen is less than 900px don't show full menu*/
#media(max-width: 900px) {
.r-menu {
display:inline;
}
.m-menu {
display:none;
}
}
/*If screen is greater than 900px then show full menu*/
#media(min-width: 901px) {
.res-full {
width: 100%;
}
}
Use this css
#media screen and (max-width: 1100px) { .r-menu {
display:inline;
}
.m-menu {
display:none;
}}
#media screen and (max-width: 900px) {
.res-full {
width: 100%;
}}
working all devices & screens
See the website http://www.localjobpool.com
I would like to hide the green top bar in mobi
le view.
Staring code of div tag is:
<div id="info">
<div class="menuHolder">
</div>
</div>
menuHolder and nav are defined in my custom CSS. I tried the solution like
#media screen......
like
#media screen and (max-width: 500px) {
.info .menuHolder .nav {
display: none
}
}
Please tell me how I can hide this bar in mobile view. And where should I insert the code suggested by you...
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
.menuHolder {display:none;}
}
also info is id and not class ( #info .menuHolder )
#media screen and (max-width: 500px) {
#info .menuHolder{
display: none;}
}
Try this media query, it should target all tablets and smartphones. Maybe you can modify its values to adjust to your needs:
#media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
.info .menuHolder .nav {
display: none;
}
}
Or the same devices, only on landscape:
#media only screen and (-webkit-min-device-pixel-ratio: 1.3) and (orientation : landscape),
only screen and (-o-min-device-pixel-ratio: 13/10) and (orientation : landscape),
only screen and (min-resolution: 120dpi) and (orientation : landscape) {
.info .menuHolder .nav {
display: none;
}
}
Worked perfectly for me.
Source: https://gist.github.com/marcedwards/3446599
That should work...
#media screen and (max-width: 500px) {
.menuHolder{
display: none;}
}
I'm trying to hide a certain image for mobile devices on my website. I've tried a various of html and css code and i cannot get it to work. It might have something to do with my div class's and Id tags.
please can someone try and get it to work for me?
HTML:
<section id="left-sidebar">
<div class="logo">
<a href="#intro" class="link-scroll">
<img src="assets/images/other_images/logo.png" alt="description of image">
<img src="assets/images/other_images/nav.png" class="nav">
</a>
</div>
CSS:
#media (max-width: 600px) {
#left-sidebar .logo .nav {
display:none;
}
}
You have to use #Media screen:
screen Used for computer screens, tablets, smart-phones etc.
Combine it with pixel-ratio to fit your needs. Check more examples here
For example (for Samsung Galaxy S3):
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
{
// insert here your custom styles
#left-sidebar .logo .nav {
display:none;
}
}
<style>
.youClassname{display:inline;}
#media screen and (min-width: 320px) {
.yourClassname{
display:none !important;
}
}
#media screen and (max-width: 768px) {
.yourClassname {
display:none !important;
}
}
</style>
I run your HTML and CSS on JSFiddle. I just change your CSS to:
img {
display:none;
}
and got this
not sure if its this what you are looking for
This seemed to work for me, which was odd
#media (max-width: 768px) {
#left-sidebar .logo .nav {
display:none;
}
}
instead using display:none try this
#media (max-width: 600px) {
#left-sidebar .logo .nav {
display:hidden !important;
}
}
this code will work if isn't still not working please check device width and go on
<style>
.youClassname{display:inline;}
#media screen and (max-width: 320px) {
.yourClassname{
display:none !important;
}
}
#media screen and (min-width: 768px) {
.yourClassname {
display:none !important;
}
}
</style>