I'm trying to make it so that when users view my site on a mobile device (a max-width of 414px), a specific div (mobile-articles) is visible. However when viewed on desktop, the view should be hidden. I've tried the below, however my div doesn't seem to be visible on a mobile device (though it is hidden on desktop). How can I fix this? See code below:
Test.html
<style>
.mobile-articles {
visibility:hidden;
display: none;
}
#media (max-width: 414px) and (min-width: 367px) {
#viewport {
width: device-width;
}
}
#media screen and (max-width : 414px) {
.mobile-articles {
visibility:visible;
display: block;
}
}
</style>
<body>
<div class="mobile-articles"></div>
</body>
In order to use media queries in your css you need to include a meta tag inside <head> to set the device-width to the width.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
CSS Solution:
.mobile-articles {
display:none;
}
#media screen and (max-width:780px) {
.mobile-articles {
display:block;
}
}
JS Solution:
<script>
if (window.navigator.userAgent.match(/Android/i)||
window.navigator.userAgent.match(/iPhone/i)) {
document.getElementsByClassName('mobile-articles')[0].style.display = 'block';
}
else {
document.getElementsByClassName('mobile-articles')[0].style.display = 'none';
}
</script>
If still dont working I recomend you to delete the this code in CSS stylesheet
#media (max-width: 414px) and (min-width: 367px) {
#viewport {
width: device-width;
}
}
Anyway , if you want to simplify code , you could use Bootstrap, materialize , or any other framework as big as those
You should simply use bootstrap and its visibility classes which is for exactly you are trying to do.
https://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm
For your code; i think you can try specifying window size for large screens too. I mean first style for mobile articles class should be in a media query too.
if you use bootstrap you can do:
<div class="d-sm-block d-lg-none" >
Related
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;
}
}
I'm trying to get an element to hide at 460px and below.
I'm trying to hide the phone number & email at the very top in the header.
info#locksmithsuppler.com (909) 278-2644
I'm having trouble. Thank you for helping.
http://www.superherodigital.com/locksmithsupplier/
I have this code in place but it is not working
media="all"
#media (max-width: 460px)
#hide-none {
display: none;
}
You need to have correct syntax and information.
Use this and also when you are looking on mobile you need to make sure your meta tags are correct.
#media (max-width: 460px){
#hide-none {
display: none;
}
}
Your view port is important for mobile devices.
<meta name="viewport" content="width=device-width,initial-scale=1.0">
The
#media
query you have is incorrect. The correct syntax for that would be
#media (max-width: 460px){
#hide-none {
display: none;
}
}
with a curly-brace for the media query and separate curly braces for the selectors inside of the query. Refer to Cayce K for the viewport comment, it is really important.
I looked around but found nothing, I was wondering is it possible to change the header's img when you try to make a responsive website?
For example: show normal img when screen width is more than 800px and when you go below 800px replace that img with another one.
Thanks!
You can use CSS3 media queries to achieve responsive web design.
Let us assume you have a header with id : headerID
default css:
#headerId {
background: url("default-image-url.png");
}
Then you just need to add the following to your CSS file:
#media (max-width: 800px) {
#headerId {
background: url("different-image-url.png") !important;
}
}
Then in your HTML at the <head> add
<meta name="viewport" content="width=device-width">
With JQuery it would be:
if ($(window).width() < 800) {
$('#divID').css("background-image", "url(/myimage.jpg)");
//image when windows is less than 800px
}
else {
$('#divID').css("background-image", "url(/myimage.jpg)");
//image when windows is more than 800px
}
You can't do this with one <img> tag unless you use javascript.
To use CSS only you need to use background images as mohamedrias says, or have two images and show or hide one, based on the screen width by using a media query:
#media (max-width: 800px) {
#headerImg1 {
display: none;
}
#headerImg2 {
display: block;
}
}
#media (min-width: 801px) {
#headerImg1 {
display: block;
}
#headerImg2 {
display: none;
}
}
So I'm using two media queries on my page:
<link rel="stylesheet" media="screen and (max-device-width: 1099px)" href="./src/css/narrow.css" />
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="./src/css/main.css" />
The main.css one loads by default, but when the browser is re-sized below 1100px, it simply loads no stylesheet, therefor the entire page renders no styling.
Anybody have any clue what I'm doing wrong? Also, isn't it possible to use media queries inside of "main.css"? So I can only alter certain elemnts based on browser width, instead of loading a whole new stylesheet? Thanks much guys :)
Yep you can do this all in the main stylesheet, so something like this:
#media only screen and (max-width: 1099px){
/* css here */
}
#media only screen and (min-width: 1100px){
/* css here */
}
Actually I also noticed you had max-device-width: on so this will only target ipads/iphones etc which is probably why you weren't seeing this stylesheet on the desktop
The alternative is to use Javascript/Jquery to detect the screen size and load a different stylesheet based on that screen size, but Adam's solution is probably better unless you need to separate your style sheets for a particular reason.
This article will give you all the information you need using jquery - http://css-tricks.com/resolution-specific-stylesheets/
You can also use multiple queries - I make a new one every time I fine a width that doesn't look quite right.
#media (max-width:319px) {
// styles
}
#media (min-width:320px) and (max-width:479px) {
// styles
}
#media (min-width:480px) and (max-width:479px) {
//styles
}
etc..., etc...
I'll also usually built the queries on each element that needs them. I find that when you put ALL your rules for the a media query in one section of your stylesheet things get confusing to maintain.
For example:
div.box {
width: 100%;
}
#media (...) {
width: 80%;
}
#media (...) {
width: 60%;
}
etc...
Then on another element that needs resizing I'll do the same thing:
div.otherbox {
width: 100%;
}
#media (...) {
width: 80%;
}
#media (...) {
width: 60%;
}
etc...
I understood how I change CSS via media queries (such as media="screen and (max-width:640px)")
but let's say I want to write (just for example)
<div>
[if screen resolution is lower then 960 px]
<div>
some new text only for lower resolution
</div>
[end of condition]
</div>
What is the condition I need to write to get it right?
As far as i have experienced, you cannot do media queries inside HTML pages. You need to do it from within your CSS.
But if you want to show some special text only when it is below a certain resolution, why not only make it visible when the resolution is lower than 960px?
Creating responsive designs is very different from a regular design, because you have to think a lot more (which is haaard)
you can check it via using javascript screen object :
screen.width
or you can do this with css
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
http://css-tricks.com/6206-resolution-specific-stylesheets/
http://www.javascriptkit.com/howto/newtech3.shtml
I am actually going through the same situation and found that if you want to do this you could really add all the text in the HTML page, and then hide it on screen widths that you don't want it to show. For example:
<div>
[text that will be shown for screens less or equal to 960px in width]
<div class="smallScreen">
some new text only for lower resolution
</div>
[end of condition for small screens]
[text that will be shown for other screens that are greater in width]
<div class="largeScreen">
some new text only for higher resolution
</div>
</div>
And then you could add CSS:
/* On smaller resolutions, hide the text for Large screens */
#media only screen and (max-width: 960px) {
.largeScreen {display: none;}
}
/* On larger resolutions, hide the text for Small screens */
#media only screen and (min-width: 960px) {
.smallScreen {display: none;}
}
I hope this works out fine :)
You need to assign an id (or a class or any other way of finding your element from CSS) to the <div> and then you can set a media query definition like this:
<div id="mydiv">...</div>
<style type="text/css">
#media screen and (min-width: 961px) {
div#mydiv { display: none }
}
</style>
Or for better readability: Make it hidden on default and visible if max-width: 960px.
I could be wrong, but I think css selection by resolution would need a little help from javascript.
Here is a quick example of what that js could look like, embedded in jquery:
$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768)) {
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else {
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});
Hope that helps.
You can add jQuery function to change style dynamically as per scree resolution.
if(screen.width==1600)
{
jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -0.7%');
}
else if(screen.width==1280)
{
jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -0.9%');
}
else if(screen.width==1024)
{
jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -1.1%');
}
else if(screen.width==800)
{
jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -1.3%');
}
Answere was helpful from:
if screen resolution is less than x append css
You can do this entirely with CSS 3 using the #media command.
**#media (max-width:960px) { css... } //nothing with screen size bigger than 960px
#media (min-width:960px) { css... } //nothing with screen size smaller than 960px**
Jason Whitted makes a good point, this is CSS 3 only, so it won't work with older browsers (it should work with all modern browsers though).
You can as well do screen or device edit
#media screen { .nomobile { display: block; } } //desktops/laptops
#media handheld { .nomobile { display: none; } } //mobile devices
Or you could assume mobile devices will have a smaller width, and go on that.