I want to show a hyperlink only for phone users and not desktop users. Is this the way to do it?
#media screen and (min-width: 480px)
{
<a href="xxxxx"> Test <\a>
}
No. You don't want to add HTML to the CSS, it won't work.
The HTML:
<a class="formobile" href="0000000"> Phone # </a>
The CSS:
a.formobile { display: none; }
#media screen and (min-width: 480px) {
a.formobile { display: block; /* or display: inline-block; or display: inline; depending upon surrounding markup */ }
}
Create the link in your HTML page
Target it with device width specifically to show on those resolutions and mobile devices.
Note that I used min-device-width as opposed to min-width. Use what is suitable for your project.
Something like this
a.mobile-only {display: none;}
#media screen and (min-device-width: 480px) {
a.mobile-only {display: inline;}
}
Related
Why does nothing I do on my CSS style sheet work?
I have the following code which displays a placeholder div when on a desktop screen and to disappear when it's displayed on a mobile/tablet screen.
#media only screen and (min-width: 940px) {
.image_placeholder {
display: block;
}
}
.image_placeholder {
display: none;
}
<div class="image_placeholder">
This is an image placeholder
</div>
Why can't I get this to work: Set the .image_placeholder with css todisplay:none; when the screen width is below 920px and set it to display:block; when it is at 920px or above.
Why does the .image_placeholder disappear regardless as to whether the screen is above or below the 920px threshold?
Assuming the missing . in front of the second image_placeholder isn't there in the actual code:
CSS rules, when selectors are of equal specificity, are applied in order.
So, if the media query applies:
.image_placeholder { display:block; }
.image_placeholder { display:none; }
So it gets none.
If the media query doesn't apply, then you just have:
.image_placeholder { display:none; }
So it gets none.
Order matters.
If you want the media query rules to override the non-media query rules then put the media query last.
You should write the media query after the main CSS.
.image_placeholder {
display: none;
}
#media only screen and (min-width: 940px) {
.image_placeholder {
display: block;
}
}
<div class="image_placeholder">
This is an image placeholder
</div>
Edit:
An example code with image would be like this -
.image_placeholder {
display: none;
}
#media only screen and (min-width: 940px) {
.image_placeholder {
display: block;
}
}
<div class="image_placeholder">
<img src="https://via.placeholder.com/500x500.jpg">
</div>
<p>This is sample text to test that the placeholder image div leaves no white space in mobile resolution.</p>
You should add full stop . in-front of class name like .image_placeholder.
I've got a problem which I have no idea how to get around of.
I use a shop script where I can only edit CSS file.
I have a div with background-image and in there I have a normal image:
<style type="text/css">
.someclassforcss img{
some:attributes;
}
.someclassforcss {
background-image:url(/link.png);
}
</style>
<div class="someclassforcss">
<img src="/link2.png">
</div>
Everything's good, but I want to use media queries (or any other method) to hide background-image of div for mobile devices, but I have no idea how to make it, because media queries doesn't work for specific attributes, only for whole elements, so if I would've hided the div, my img is also hided which i don't want.
You DO can change attribute regarding media dimensions.
Your CSS:
.someclassforcss {
background-image:url(/link.png);
}
#media screen and (max-width: 762px){
.someclassforcss {
background-image: none;
}
}
Try this:
#media only screen and (max-width: 767px){
.someclassforcss {
background: none;
}
}
You can hide the div with a media query. eg:
#media (max-width: 600px) {
.someclassforcss {
display: none;
}
}
or if you just want to remove the background image:
#media (max-width: 600px) {
.someclassforcss {
background-url: none;
}
}
Using the #media tag, how do I display a new image, for example I have a logo I want to use for my main site and a mobile logo for my mobile site, how to I display the smaller logo only on the mobile site using #media?
I've tied using "display:url('xxxx') but that hasn't seemed to work.
You'll have to put two logos on your HTML, like this:
<img src="" class="desktop-logo">
<img src="" class="mobile-logo">
Then, you'll have to hide the mobile-logo by default:
.mobile-logo {
display: none;
}
Then, on your media query, you'll have to hide the desktop-logo and show the mobile-logo:
#media screen and (max-width: 480px) {
.desktop-logo {
display: none;
}
.mobile-logo {
display: block;
}
}
What you'll want to do is create an element and set a background on it. You'll use #media control what the background image is based on the size of the window.
#media only screen and (min-width: 768px) {
.logo {
background: url('image.jpg');
}
}
#media only screen and (max-width: 767px) {
.logo {
background: url('imagesmall.jpg');
}
}
And this is what your element would look like.
<div class="logo"></div>
Create a tag with a class then use mediascreen to apply new styles to said class
create a div tag
css/
#media screen .... etc {
.image {background-image: url('wwww....');
}
So, when the exact pixels are reached at the screen it will apply a backround image to that image class I created above.
I'm working on a HTML site and adding a mobile menu. I was able to add the menu but having trouble with the button that opens that menu. This is what I have.
<a id="simple-menu" href="#sidr">
<img class="hidedesktop" src="img/menu-icon.png" alt="Menu">
</a>
And when I press the image it opens the menu. I need it to remove this from the page on desktop and show on mobile. I've been doing some research and found that
display:none;
should work in the #media but I tried and wasn't able to set this up correctly. Can anyone tell me what I'm doing wrong? Below is my CSS for hide desktop.
.hidedesktop{
display:block;
}
and CSS for #media remove on desktop
/*#media only screen and (max-width: 768px) {
.hidedesktop{
display:block;
}
}
#media only screen and (min-width: 768px) {
.hidedesktop{
display:none;
}
}
}
*/
I would like to also hide the main menu on the mobile version but if I get help with this I think I'll figure that out.
You only need min-width for it.
#media only screen and (min-width: 768px) {
.hidedesktop {
display:none;
}
}
Or to use min-device-width if you want (unlikely), make sure to check out the link below if you're not sure about it.
#media only screen and (min-devide-width: 768px) {
.hidedesktop {
display:none;
}
}
Read here to learn the differences
I have a PhoneGap app that displays an unordered list utilizing jQuery mobile's layout. When you view the app on a smaller screen, the text overlaps and you can't read it anymore. I can't figure out how to have the line "break" so that it appears as two lines when the screen size is reduced, and one line when it is not reduced.
Full screen
Reduced screen
On the second line the text disappears, and is "hidden" by the numerical values. The code of that chunk looks like this:
HTML:
<div data-role="content">
<ul data-role="listview" data-divider-theme="a">
<li data-role="list-divider"></li>
<li><b>Revenues</b></li>
<li>Gross Sales<span class="right">$543,600</span></li>
<li>Less Sales Returned and Allowances<span class="right">$9,200</span></li>
<li>Less Sales Discounts<span class="right">$5,100</span></li>
(continues on)
CSS:
span.right {
float: right;
}
Add a class to <br>.
Example:
Say u want to break <br> only at a custom screen size 358px n below.
HTML:
<br class="hidden-ss">
CSS:
#media (min-width: 359px) {
.hidden-ss {
display: none !important;
}
}
In reality u may have multiple #media screen breaking points already defined, e.g when using default Bootstrap:
HTML:
<br class="visible-ss hidden-xs hidden-sm hidden-md hidden-lg">
Define CSS:
#media (max-width: 358px) {
.visible-ss {
display: block !important;
}
Already pre-defined in Bootstrap:
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
#media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
This is a job for a table:
<!doctype html>
<title>Table demo</title>
<style>
td:nth-child(2) { text-align: right }
</style>
<table><caption>Revenues</caption>
<tr><td>Gross Sales <td>$543,600
<tr><td>Less Sales Returned and Allowances <td>$9,200
<tr><td>Less Sales Discounts <td>$5,100
</table>
If you really want the figures placed on the very right, you can add the CSS rule table { width: 100% }, but the presentation is much more readable without it.
so you can use
white-space: normal !important;
I was using white-space: normal; without the !important tag it does not become "wrap text" with JQuery mobile.
For smaller screens please use the CSS below so the span automatically comes in with the next line:
#media only screen and (max-device-width: 480px) {
span.right {
display:block;
text-align:right;
clear:both;
}
}
If you use Bootstrap, you can put a breaking point depending on the screen size.
For example, to break line only on screens smaller than medium, you could put that in your html:
<br class="d-md-none">
More info on https://getbootstrap.com/docs/5.2/utilities/display/#hiding-elements