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;
}
}
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'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" >
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;
}
}
Is there a way to create a media query for one size only?
#media(min-width: 484px) {
img {
display: none;
}
}
The example above shows the image will disappear starting at 484px on. Is there a way to write a media query where the image will only disappear at 484px and reappear at 485px without adding another media query?
Also, is there a way to write a media query to do something between two sizes without writing 2 - 3 media queries?
I was wondering if there is a way to write both of these on one line.
why not just
#media (width:484px) { ... }
?
That is to say:
#media(width: 484px) {
img {
display: none;
}
}
Mozilla's documentation for media-query media-features
You can chain media queries:
To hide the image for 484px only:
#media (min-width: 484px) and (max-width: 484px) {
img {
display: none;
}
}
Update
#DaMaxContent provided a better solution.
Just use width instead of both min-width and max-width.
#media (width: 484px) {
img {
display: none;
}
}
You should do like the following code:
CSS:
#media(min-width: 484px) and (max-width: 484px) {
img {
display: none;
}
}
It will hide only at the defined pixels.
Hope it helps you.
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.