im trying to make a responsive website and let a h3 show up when i make the screen smaller but it is not showing up. Here is my code:
#media only screen and (max-width: 1486px)
{
.resptekst
{
visibility: visible;
}
}
.resptekst
{
visibility: hidden;
}
HTML
<div class="tekst">
<h3 class="resptekst">Contact</h3>
</div>
The text needs to show up when i make the screen smaller, when screen is big enough text should be not visible.
change css position
css render top to bottom way
.resptekst
{
visibility: hidden;
}
#media only screen and (max-width: 1486px)
{
.resptekst
{
visibility: visible;
}
}
Change the order of the CSS rules.
Place the general rule before the #media rule, otherwise it will always override it, regardless of screen size.
In CSS, always specify from generic to specific, otherwise the generic rules will override the specific ones.
/*Generic rule*/
.resptekst
{
visibility: hidden;
}
/*small screen specific rule*/
#media only screen and (max-width: 1486px)
{
.resptekst
{
visibility: visible;
}
}
<div class="tekst">
<h3 class="resptekst">Contact</h3>
</div>
If you have a large enough display (full HD for example), you can test this snippet by clicking on the Run code snippet button and then clicking on the Full page button.
#media only screen and (max-width: 1486px)
Means "target everything smaller than 1486px"
So change your css to:
.resptekst
{
visibility: visible;
}
#media only screen and (max-width: 1486px)
{
.resptekst
{
visibility: hidden;
}
}
Media query should be at last, your css without media query comes first
.resptekst
{
visibility: hidden;
}
#media only screen and (max-width: 1486px)
{
.resptekst
{
visibility: visible;
}
}
<div class="tekst">
<h3 class="resptekst">Contact</h3>
</div>
Related
I'm working on making my website responsive, but I encountered a problem.
I'm trying to hide a section to make it only phone visible, but as I try to set my display:none for my section and to enable it in my media query, it is overwritten by my non-media query code.
The 2 sections that I want to hide from PC users are .phone-services and .avis-phone. The problem is that, as I said if I state them as display:none, they will overwrite my media query.
Here is a part of my #media CSS:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.services {
display:none !important;
}
.avis {
display:none !important;
}
.phone-services {
background:#02000A;
}
.avis-phone {
background:#02000A;
color:white;
}
}
Here is a part of the other CSS that overwrites it:
#import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');
* {
margin:0; padding:0;
box-sizing: border-box;
text-decoration: none;
outline: none; border:none;
font-family: "Shippori Antique B1" , sans-serif;
transition: .2s linear;
}
html{scroll-behavior:smooth !important}
a:visited{
visibility:hidden;
}
.phone-services {
display:none; /*Overwrites my media query*/
}
.avis-phone {
display:none; /*Overwrites my media query*/
}
HTML:
<section class="phone-services">
Section need to be shown only for mobile
</section>
<section class="avis-phone">
Section need to be shown only for mobile
</section>
Thanks for your help!
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
min-device-width and max-device-width are only for actual devices. If you try to simulate that on a desktop, it won't work for you. You should use min-width and max-width instead.
Secondly, -webkit-min-device-pixel-ratio: 2 is to check device resolution, but we have various devices which we cannot simply cover with a particular resolution. I'd suggest removing it.
Another problem is from here
.phone-services {
background:#02000A;
}
.avis-phone {
background:#02000A;
color:white;
}
You set display: none, but you don't set display: block (or any other visible display values)
Another point I'd like to note down that the style priority is TOP to BOTTOM when they have the same selectors. Your display style in media-query is above display: none like below, that will cause display problem too
#media {
.phone-services {
display: block; /*NOT WORKING*/
}
}
.phone-services {
display:none;
}
Full possible change can be
#import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
border: none;
font-family: "Shippori Antique B1", sans-serif;
transition: 0.2s linear;
}
html {
scroll-behavior: smooth !important;
}
a:visited {
visibility: hidden;
}
.phone-services {
display: none;
}
.avis-phone {
display: none;
}
#media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
.services {
display: none !important;
}
.avis {
display: none !important;
}
.phone-services {
background: #02000A;
display: block;
}
.avis-phone {
background: #02000A;
color: white;
display: block;
}
}
<section class="phone-services">
Code in here
</section>
<section class="avis-phone">
Code in here
</section>
You always have to define display if you are hiding / showing them depending on #media, both in #media part and non-#media part.
Try adding it to the rules:
#media screen and ...
{
.phone-services {
background:#02000A;
display: block; // can be block, inline-block, flex...
}
.avis-phone {
background:#02000A;
color:white;
display: block; // can be block, inline-block, flex...
}
}
Note that if you have #media part loaded before the normal one, you have to make sure to load #media part after, so it does not get overridden, or you can use !important with the rule (not recommended).
I have a div which I want to hide when the screen is mobile size. Currently I have
html
<div id='top-btn'>
<a class="fade-in" href="...">Top</a>
</div>
css
#top-btn a {
visibility: visible;
opacity: 1;
position: fixed;
...
}
#media screen and (max-width: 768px) {
#top-btn a { display: none; }
}
The div is hidden but the button is still there, so there's an area that still links (clickable). I want it to be completely gone so they can't click on it
You need to remove the whole button, rather than just the link itself:
#media screen and (max-width: 768px) {
#top-btn { display: none; }
}
Hope this helps!
For me the code works..without any changes.
Maybe your browser don't support #Media,
Here you can check what browsers support this command
Link: http://caniuse.com/#feat=css-mediaqueries
but before checking the link,try this..
#media screen and (max-width: 768px) {
#top-btn , .fade-in { display: none; }
}
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
So I have managed to get the following code working:
#media screen and (max-width: 1024px) {
.hide {
display: none !important;
}
}
This makes sure the div with class 'hide' will not show if unless it is 1024px.
How would I be able to make it the opposite (so it will show if the screen is below a particular size then hide if the screen is larger)?
I've tried looking through multiple pages of tutorials etc. but could not find a working answer.
You can try this: http://jsfiddle.net/lotusgodkk/GCu2D/174/
CSS:
div {
border:1px solid green;
padding:10px;
width:300px;
height:300px;
}
#media screen and (min-width: 0px) and (max-width: 1024px) {
#my-content {
display: block;
}
/* show it on small screens */
}
#media screen and (min-width: 1025px) and (max-width: 2048px) {
#my-content {
display: none;
}
/* hide it elsewhere */
}
HTML:
<div id="my-content"></div>
You can play around with the max-width and min-width for desired effect
Kamlesh answer is correct, however you should use display: initial or display: inherit instead of display: block as these will not mess with span elements for example which display: block might do.
Max width means that rule will not be triggered above that width. Min-width means the rule will not be triggered below that width. If you want something to show up at a certain width and greater, use min-width.
Example:
#media only screen and (min-width:992px) {
.hide (display: none;) // means that element with class 'hide' will be hidden at 992 pixels and above
}
show if < 1000px!!!!!!!
winW = $(window).width();
$("#px").html(winW);
if(winW>1000){
$(".foo").hide();
}else{
$(".foo").show();
}
$(window).resize(function () {
winW = $(window).width();
$("#px").html(winW);
if(winW>1000){
$(".foo").hide();
}else{
$(".foo").show();
}
});
.foo{
height: auto;
margin-top: 70px;
border: 2px solid #E3E3E3;
border-radius: 19px
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body> show if < 1000px!!!!!!!
<div class="foo" >
<h1><center> show if < 1000px </h1>
</div>
<p id="px">
</p>
</body>
</html>
Instead of just having text for example
If I do
1-800-123-4567 then it will be broken on desktops.
If I do (800) 123-4567 then it will display as the number on desktop but should automatically become a link on Android and iPhone
But if I want to make an image like this:
Is there a solution, possibly with media query or any other way. That I can make this image display on desktop and mobile but on mobile function as a button? This is for email so only HTML/CSS options.
Based on the answers I have this and it didn't work either:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-image { display: block; } /* show it on small screens */
#my-link { display: none; } /* hide it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 1024px) {
#my-image { display: none; } /* hide for all below 401px*/
#my-link { display: block; } /* show for all above 401px*/
}
Along with:
<div id="my-image">
Call Now!
</div>
<div id="my-link">
Call 1-800-328-4766
</div>
And it still is not working, both links are showing up.
Deleted my old answer, because it was poor. Please try this http://jsfiddle.net/qDUqS/
The telephone number looks the same both in small screen and in big screen, but it acts like a link, only on smaller screen.
Html:
<span class="phone"><img src="http://goo.gl/PdeeU" />1-800-123-4567<p>1-800-123-4567</p></span>
CSS:
.phone
{
background-color: #152C48;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 4px;
}
a
{
display: inline-block;
text-decoration: none;
color: #ffffff;
padding: 0px;
}
img
{
vertical-align: middle;
width: 24px;
height: 24px;
padding: 0px;
}
p
{
display: none;
color: #ffffff;
padding: 0px;
}
#media only screen and (min-width: 480px) and (max-width: 1920px)
{
a
{
display: none;
}
p
{
display: inline-block;
}
}
Hey I don't know if this is what you are asking for but it might help.
Do let me know.
http://www.wpbeginner.com/wp-tutorials/how-to-add-clickable-phone-numbers-for-smartphones-in-wordpress/
Sorry if this is not what you were looking for.
NOTE: Updated my code and all works as it should be now. set the max-width to 9999px.
Working JSFIDDLE
Make a div and put the image inside that div:
<div id="my-image"></div>
The css would look like this:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-image { display: block; } /* show it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 9999px) {
#my-image { display: none; } /* hide for all below 401px*/
}
for your button/link you can do the same but then otherwise:
<div id="my-link"></div>
The css would look like this:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-link { display: none; } /* hide it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 9999px) {
#my-link { display: block; } /* show for all above 401px*/
}
Hope it helps.
The answer is very simple, just ad opacity "transparrency" to the desktop code.and copy the code to mobile while setting the opacity to 1.