.bg-img-1 {
background: url("../images/bg-img-01.jpg");
}
This is loading the background image in the site and I want to display an another image for mobile displays. How can I do it?
You can use media queries in your css:
// default image
.bg-img-1 {
background: url("../images/bg-img-01.jpg");
}
// for tablets and above
#media screen and (max-width: 768px){
.bg-img-1 {
background: url("../images/bg-img-01-tablet.jpg");
}
}
you can use multiple media queries for different screen resolutions.
you can used media and to another size review another image
#media screen and (max-width: 940px) {
.bg-img-1 {
background: url("another image");
}
}
You need to use media queries :)
For computer queries, you use one image, and for mobile queries, you use an other image :) Check W3C it can help you :)
Related
Is there a way to do this with html and css or can I only do it with javascript/bootstrap? I'm fairly new to coding so detailed explanations if possible would be nice!
You can do that with css media query. If you are begineer here is a small tutorial on that CSS media query.
According to mobile device size you can hide the navbar.
EXAMPLE:
#media only screen and (max-width: 600px) {
.navbar{
display:none;
}
}
You can hide show with the help of #media screen to show or hide the code in different devices sizes.
Examples:
#media screen and (max-width: 767px) {
.hide_on_mobile {
display: none;
}
}
#media screen and (min-width: 768px) {
.hide_on_mobile {
display: block;
}
}
Yes you can.
There several approaches to do that
Detect device is touchable (e.g. with Modernizr like tools) - I do not recommend, cause nowadays event laptops provided with touch displays.
By device's viewport - here's the good table list with most popular devices viewports by Adobe
I prefer second approach
So the solution comes in hand with CSS media-queries
And read about mobile first techniques
Example (press the Full page button after running snippet to look how it's gonna look in desktops)
<style>
#navbar {
display: none;
}
#media (min-width: 640px) {
#navbar {
background: lightblue;
height: 60px;
}
}
main {
background: #ccc;
min-height: 40vh;
}
</style>
<div id="navbar"></div>
<main></main>
They always say that min-width #media rule is the way to build for mobile first, I have read plenty articles about it but i still can't understand how exactly min-width rule works> But the max-width is easy and lends itself to easy comprehension.
#media only screen and (min-width: 400px) {....some rule here.....}
#media only screen and(min-width: 900px){......some rule here....}
my question and confusion is: can one used both breakpoint on the same stylesheets? and how does it make for mobile first ?
I need a tolerable responses please, no down voting for those who enjoy down voting please be tolerable and nice enough to help put.
Indeed its true using min-width helps to make a web mobile first.
Let us take an example.
We are creating a web that will scale to two viewports say 300px, 300px+ devices.
1) using min-width
body {
background: yellow;
}
// 300px+ devices
#media (min-width: 300px) {
body {
background: red;
}
}
Here background-color is been overridden for 300px+ devices
2) using max-width
body {
background: red;
}
// 300px- devices
#media (max-width: 300px) {
body {
background: yellow;
}
}
Here background-color is been overridden for 300px- devices
Now down the line in your App timeline you need to support 600px+ devices
3) using min-width
body {
background: yellow;
}
// 300px - 600px devices
#media (min-width: 300px) {
body {
background: red;
}
}
// 600px+ devices
#media (min-width: 600px) {
body {
background: green;
}
}
New media query added to support 600+ devices, no changes needed in the existing style sheet.
4) using max-width
body {
background: green;
}
// 600px- devices
#media (max-width: 600px) {
body {
background: red;
}
}
// 300px- devices
#media (max-width: 300px) {
body {
background: yellow;
}
}
Although we needed additional media-query rule to support 600+ devices, but we needed to change the global body background-color to support new breakpoint.
Now compare 1) with 3) and 2) with 4) ,
you will notice to support new breakpoint
for 1 to 3 we didn't need to change existing style rules, just added new rules over it.
but for 2 to 4 existing rules were modified to support new breakpoint
Summary
so min-width ensures future friendly and progressive enhancement (mobile-first)
but max-width leds to short-sighted approach and needs degradation (mobile-last)
Is it possible in Firebug (Firefox Web Development add-on) to display which media query rules are currently active?
E.g.: I monitor a div element as usual. Then I scale the browser window to be smaller than 400px (or use the Firefox web dev screen size tool). I want to see a list of rules that are currently active for this element like this.
#media screen and (max-width: 400px) {
div { float: left }
}
Is that possible with Firebug or a similar tool?
You can use something like this, to show what mediaquery is currently working, please update with your mediaqueries:
The div will print what mediaquery is 'on', so you can hide the div, and use it only for development purposes.
#media (min-width: 400px) {
.mediaq:after {
content:'min 400'
}
}
#media (min-width: 800px) {
.mediaq:after {
content:'min 800'
}
}
#media (min-width: 1200px) {
.mediaq:after {
content:'min 1200'
}
}
<div class="mediaq"></div>
Let me know how to achieve this if it's possible to do so using HTML5 only.
I've done all of my responsive design using CSS with media queries. I'm currently working on a template displayed inside an editor and the customer wanted it to be mobile friendly. The problem is I can't include any css or javascript files inside that editor and so wonder if there's any possible way to achieve that
No you can't build responsive web page without using css
for responsive web page create css with
#media screen and (min-width: 737px) and (max-width: 1200px) {
/* write CSS element */
}
#media screen and (max-width: 736px) {
}
#media (min-width:768px){
}
for example write media specific css like
#media (min-width:768px){.para{font-size:21px}}
#media (min-width:992px){.container{width:970px}}
#media (min-width:1200px){.container{width:1170px}}
#media screen and (max-width:767px){
.table-responsive{width:100%;margin-bottom:10px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:2px solid #ddd
}
programming tutorials
I'm trying to make a responsive index for my website, for this, i'm using Firefox Responsive Design Mode. In 1920x900px, my #media is working perfectly. The problem is when i change to 1280x600px. He keeps getting the images positioning like i order in 1920x900px. I made some tests and other attributes for 1280x600px works ! Here's the comments in my code:
/* Para monitores 1280x600px */
#media screen and (max-height:600px){
#slider{
/* If i change this to display:none; it really disappear the tag,
which makes me guess the screen calc is doing ok.*/
height:73.5vh;
}
}
#media screen and (max-width:1280px){
#mainAtc{
margin-left:2vw;
}
#othAtc{
margin-left:0;
}
}
/* Para monitores 1920x900px */
#media screen and (max-height: 900px){
#slider{
/* But, if in 1280x600 i got display:none, and here i got display:block, he shows me the image. It's like it doesn't work just when i give same attributes to differente #media. */
height:51.6vh;
}
}
#media screen and (max-width: 1920px){
#mainAtc{
margin-left:2vw;
}
#othAtc{
margin-left:7.6vw;
}
#atcRest{
margin-left:2vw;
}
}
Someone could help me ? Thanks!