I used everything already and I have no idea, why my #Media Queries doesnt work. "viewport" is already added to HTML head, #media are in the end of CSS document.
CSS code:
#media only screen and (max-width: 768px) {
.bio_img {
width: 50%;
}
.bio_photo {
width: 30%;
}
.youtube {
margin-left: 20%;
}
}
Your problem is the // comments.
CSS cant read that. you need /* comment goes here */
in this case you should use
/* Tablet diagonal width:768px */
here is a link with your code and the test.
https://jsfiddle.net/Willox_san/e68of5sL/2/
good luck!
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>
I'm using CSS to selectively display content depending on viewport size. E.g.:
CSS:
.hires, .midres, .lowres {
display: none;
}
#media only screen and (min-width: 801px) { /* hires, desktop */
.hires {
display: inline;
}
}
#media only screen
and (min-width: 600px)
and (max-width: 800px) { /* mid res, tablet */
.midres {
display: inline;
}
}
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
.lowres {
display: inline;
}
}
HTML:
<p class="hires">Resolution: high.</p>
<p class="midres">Resolution: medium.</p>
<p class="lowres">Resolution: low.</p>
<p>This paragraph will always be displayed regardless of resolution.</p>
Which works, but only up to a point. When it comes to images, it turns out that I've neatly painted myself into a corner here. Because somewhere down the line there's something like:
CSS:
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
img {
float: none;
display: block;
width: 100%;
height: auto;
}
}
Which means that in the following case:
<img src="foo.jpg" class="hires" />
the image is always displayed regardless of viewport size, because the 'display: block;' overrides (conflicts with, really) the preceding rules to selectively display the image or not.
Unfortunately 'display' has no opposite of 'none'. I can't use 'visibility' because that will still leave a gap where the hidden content used to be. I could use jQuery to show() and hide() content, but I'd rather not move part of my styling from the style sheets (where it belongs) to Javascript (where, strictly speaking, it doesn't).
Unfortunately I noticed this little snafu only now, quite a way into the project. Which means I'm an idiot. :-)
What would be the best way to deal with the above issue?
You could either wrap images in something with the class lores or use img.lowres as selector in your css, ie
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
img.lowres {
float: none;
display: block;
width: 100%;
height: auto;
}
}
I have issues with my media queries. It seems like they do not work in either browser. I tried in Opera, Chrome, Firefox. This is the page http://amatalents.com/about-us.html and those are media-queries for main div section
#media screen and (min-width: 150) and (max-width: 400) {
.windows div {
width: 100%;
display: table-column;
}
.windows div a {
font-size: 10px;
color: green;
}
.windows {
background-color: red;
}
}
I also validated the css file and first time it did fine and only mentioned the css parser error reffering to media queries part of the file, but the second time it referred to media queries only without mentioning parser error.
I am lost...
Please help!
You are missing px.
#media screen and (min-width: 150px) and (max-width: 400px)
I am in despair. I am trying to make a website and make it mobile-friendly and responsive, however, I cannot seem to get any kind of media query to work at all! All my sizes, width and heights are in "%/em" and my font-sizes are in "vw/em". The biggest problem I get is that, as the screen shrinks, so does my text, to the point where it simply becomes eye-straining to read! I don't see relevant to send any code but if need be, I shall send some of my code (my website is still offline and I cannot put it out there if this problem isn't fixed).
Here's what I have tried:
I have tried putting this in my tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
No success when I try media query in a tab or in a separate css stylesheet.
I have tried removing it aswell.
I have tried these media queries for my font-sizes:
#media (max-width: 400px) {
body { font-size: 60%;}
}
#media only screen and (max-device-width: 800px) {
body {
font-size: 80%;
background-color: blue;
}
}
#media (max-width: 1100px) {
body { font-size: 120%;}
}
I have also tried other media queries but absolutely NOTHING changes at all! Am I doing something wrong? Probably but what?!! This is leading to so many problems! I cannot change my header according to different screen sizes, I cannot change my display, my header links are a mess, etc.
Also, please note that I am a beginner and I do not use any javascript, bootstrap or whatever.
Thank you in advance for your help!
Your queries are a little weird. Perhaps with some logical constrains you can achieve what you are looking for? This is what I mean:
#media (max-width: 400px) {
body{
background-color: yellow;
}
}
#media (min-width: 401px) and (max-width: 800px){
body {
background-color: blue;
}
}
#media (min-width: 801px) and (max-width: 1100px) {
body {
background-color: purple;
}
}
#media (min-width: 1101px){
body{
background-color: orange;
}
}
In my humble opinion, setting the intervals using both min-width and max-width help me visualize what's going on better. This pen shows the colors changing whenever you change the width. It doesn't do much good, but it's something to get started with media queries.
EDIT:
Pen contains transitions between colors because cool
Usually, it's better to use media queries based on minimum screen width. Here is an working example with the code you posted:
Codepen: http://codepen.io/anon/pen/eNJXXp
#media (max-width: 400px) {
p { font-size: 60%;}
}
#media (min-width: 400px) {
p {
font-size: 80%;
background-color: blue;
}
}
#media (min-width: 800px) {
p { font-size: 120%;}
}
EDIT : read further then the next 5 lines! My problem is not the logic of doing different css for mobile, tablet and desktop (#media query) - the problem is to change the IMAGE.SRC attribute FROM INSIDE CSS.
I'm trying to make a new fluid website and I'm trying to create 3 different header images:
Mobile header image (low res)
Tablet header image (medium res)
Desktop header image (high res)
(all the images also vary in aspect ratio)
How do I get this to work?
Currently I've tried to simply change the SRC in CSS for each CSS SECTION (mobile, tablet, desktop)
Like this:
#img_header {
src: url(img/header_m.png);
}
We all know that this doesn't work :D also I don't want to use background-image instead.
What is the proper way to do this?
Should I hack into the generated javascript code from Adobe Dreamweaver CS6 and change the .src from there ?
I'm sure there is a css way, so tell me guys. Thanks
UPDATE: I should have said that I already use media queries...
Here is my css:
/* Layout für Mobilgeräte: 480 px oder weniger. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 97.826%;
padding-left: 1.0869%;
padding-right: 1.0869%;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header_m.png);
}
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 93.451%;
padding-left: 0.7744%;
padding-right: 0.7744%;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header_t.png);
}
}
/* Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 89.1614%;
max-width: 1232px;
padding-left: 0.4192%;
padding-right: 0.4192%;
margin: auto;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header.png);
}
}
NOW that you have read everything, you should imagine that I can't change the img.src from inside css..., I think the only way to do so is to hack into the unformatted auto generated javascript from adobe DW cs6, isn't it ?
You can use CSS3 media queries for your desired results.....
And I think you should read this article it will help you :-
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
You can do different images by using media queries
Mobile
#media only screen and (min-width : 320px) and (max-width : 480px) {
Your image for mobile
}
Tablet
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
Your image for tablet
}
If you are using single image in diff resolution then you need not to do take 3 images. Take the bigger image (for desktop size) and write the below css
<header><img src="img/header_m.png" /></header>
CSS
header img{max-width:100%}
I believe you are aware of media queries http://css-tricks.com/css-media-queries/
To change foreground image
If you want to change foreground images for different devices then try z-index
.header{
background-color:red;
position:relative; height:auto}
img:first-child{
position:absolute; top:0; left:0;
z-index:-1; width:200px
}
img{
position:absolute; top:0; left:0;
z-index:10; width:200px
}
Change the z-index value for respective device width.
Demo here http://jsfiddle.net/5vpG7/70/
......................
Now used to media query css
#media screen and (min-width: 500px) and (max-width: 800px) {
// your css code here
}
more info about this
i've now set another div inside the div_header, and give that child div a background image and a hardcoded width and height ( matches the individual images ), so i've faked a tag that now have ability to define (backgound-) image source via css instead of defining attribute of image source ;)
thanks anyway for your answers