I'm writing a static website and testing it locally. I have written a media query to change the layout a little bit so that it is much nicer to look at on a smartphone. With the media query my aim is to change the text and the profile photo from being side by side to being one followed by the other.
My issue is that when I load the HTML file on Chrome or Firefox and resize the window, the layout does not change and I cannot figure out how to fix it. Any help would be much appreciated. Find my code below.
For my standard CSS I have this (a small snippet):
#about-text {
/*A div containing paragraphs and a table*/
display: inline-block;
width: 50%;
}
#profile-photo {
/*An img tag after the closing about-text div*/
border: 4px solid #1abc9c;
display: inline;
float: right;
margin: 8% 0% 0% 0%;
max-width: 40%;
}
And then I have a media query and the corresponding CSS:
#media (min-device-width : 320px) and (max-device-width : 480px) {
#about-text {
/*A div containing paragraphs and a table*/
display: block;
width: 50%;
}
#profile-photo {
/*An img tag after the closing about-text div*/
border: 4px solid #1abc9c;
display: block;
float: right;
margin: 8% 0% 0% 0%;
max-width: 40%;
}
}
You are using min-device-width and max-device-width which only takes into the account the device's screen size. Use min-width and max-width and it will work in your browser when you resize.
Example:
.testDiv {
color: green;
}
#media (min-width : 320px) and (max-width : 480px) {
.testDiv {
color: red;
}
}
http://jsfiddle.net/ZUPD2/
Maybe because there is no closing bracket for the media query block ?
Related
I was following a tutorial about media queries. When I open the HTML in Chrome/Firefox, I get a blank page, and nothing displays. When I inspect the page though, the code displays normally and I can see how the media queries work. I tried adjusting the min-width and max-width of the media queries but I still get a blank page in any browser I use. I have posted the original HTML below from the tutorial.
<!DOCTYPE html>
<html>
<head>
<title>Beginners CSS - Chapter 8</title>
<style type="text/css">
* {
margin: 0px;
}
main {
margin: 10px auto;
width: 600px;
padding: 30px;
margin-top: 0px;
background-color: olive;
display: block;
}
#media screen and (max-width: 350px) {
main {
background-color: #88a5e0;
}
}
#media screen and (min-width: 600px) {
main {
background-color: red;
}
}
#media screen and (min-width: 800px) {
main {
background-image: url('images/Reeds-in-Wind-Cinemagraph.gif');
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 400px;
}
}
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
</style>
</head>
<body>
<main>
<h1>Media Queries</h1>
<p>Media allows you to make your pages to change to fit any device.</p>
</main>
</body>
</html>
The screen width changes when the developer tool is opened on the right/left dock. So, the elements that you saw perhaps are from the min-width 800px media query.
The page when the minimum width is 1000 pixels is not "blank page and nothing displays". You can read from the code below, you're setting the background-color to white, hiding the h1 & p and removing the background-image when the min-width: 1000px.
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
The page is not blank, according to your code for screens with width more than 1000px you set this styles:
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #FFF;
}
h1, p {display: none;}
}
so the h1 and p1 element will not be displayed and the background will be white,
if you resize the window other media queries happen.
Also by Opening your developer tools you are resizing your window.
I am trying to set a fall back in my CSS to change the background image to color instead when using a mobile browser.
Is there a way to set a fall back that will go work when the pixels reach the max-width.
As shown below in my snippet the "media only screen and (max-width: 600px) works when then top body class is not being used.
body {
margin: 0;
background-image: url(https://api.timeforkids.com/wp-content/uploads/2019/09/final-cover-forest.jpg);
background-size: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
input{
background-color: #03fcd3;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
You are not overriding the background-image rule, which is why the image is still showing. You set the background colour, but the background-image is still going to show.
Also, you should add the image in the media query for larger screens instead of removing it in smaller screens - otherwise it could load anyway. Mobile-first is always the recommended way to go :)
Try this (if you make your browser window small, you will see the blue background):
body {
background-color: lightblue;
/* the rest of the CSS that applies on all screen sizes, e.g.: */
margin: 0;
background-size: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
/* Note: we show min 601px because it was max: 600px*/
#media only screen and (min-width: 601px) {
body {
background-image: url(https://api.timeforkids.com/wp-content/uploads/2019/09/final-cover-forest.jpg);
/* Add any other CSS for 600+ screens here */
}
}
Note that the new media query is set at 601px - you were using max: 600px for small screens so CSS for small screens wil lapply up to and including 600px.
Using a mix of max-width:600px and min-width:600px can cause unexpected behaviour because both media queries will apply at 600px.
Try to set two media queries and don’t set background in the beginning.
Initial body background unset
For mobile devices:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
For computers:
#media only screen and (min-width: 600px) {
body {
background-image: url (https://api.timeforkids.com/wp/content/uploads/2019/09/final-cover-forest.jpg);
background-size: auto;
}
}
So I'm trying to make this website mobile friendly: coveartschildcare.com and all the header divs are overlapping and nothing I've tried seems to be working. This is the CSS I'm using:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
div#logo
{
float: left;
}
div#logo h1
{
font-size: 0.5em;
color: #777;
}
div#logo span
{
font-size: 1.4em;
color: #FFF;
}
div#header
{
background: url(../images/mobile-bg.jpg) no-repeat bottom center;
text-align: center;
float: left;
}
div#nav
{
z-index : 1;
float: left;
position: relative !important;
}
.container
{
float: left;
}
.clear {
clear: both;
}
}
I've tried making positions relative, absolute, floating left or none, auto width & height and nothing works. Any help would be greatly appreciated.
ok, what you are asking is to make the div tags smaller on your page so that they don't overlap?
to do that create a new rule like this one:
#media (max-width: 520px) {
div {
width: 50px;
}
body {
color: blue;
}
}
the max-width is the max-width that the browser will activate this on.
you can create two #media rules and change the second #media rule's max-width to equal a different number. the browser will activate the rule if the width is smaller than the max-width. when the screen size gets smaller than both of the #media rules it will run the smaller one
hope this helps...
I think, if you delte the position: absolute; on the #nav-wrapper{} it is no more overlapping.
I have a clickable image on my desktop website theme which showed on mobile screens. I’ve managed to remove the image with the following code but it has left a ‘ghost’ link which users don’t see but if touched takes them to the linked page:
In footer.tpl
<div id="footer">
<div class="column">
In stylesheet.css
#test {
#media screen and (max-width: 480px) { image display: none; }
background-image: url('../image/myimage.png');
background-repeat: no-repeat;
position: absolute;
margin-top: 10px;
margin-left: 20px;
width: 75px;
height: 75px;
Is there any way the link could also be removed? Thanks in advance.
Give your element a display:none; on the media query.
#test {
display: block;
background-image: url('../image/myimage.png');
background-repeat: no-repeat;
position: absolute;
margin-top: 10px;
margin-left: 20px;
width: 75px;
height: 75px;
background: whitesmoke; /** Testing purposes **/
}
#media all and (max-width: 480px) {
.hide {
display: none;
}
}
<div id="footer">
<div class="column">
Your CSS doesn't seem properly formed. Try replacing your media query with the following, which selects and hides your link by id:
#media screen and (max-width: 480px) {
#test {
display: none;
}
}
Right now your media query looks invalid.
To hide the link, you could do this:
#media screen and (max-width: 480px) {
#test {
display: none;
}
}
Note that this will override the display style of your #test element.
Suggestion: You may want to use a css class instead, such as <a class="hidden-mobile"... and use .test in your css file instead, so that you can reuse your class multiple times.
I am creating a new website, here is the www.qldmetals.com
Everything seems to be fine on website except its responsiveness on iPhone. In iPhone the logo sits over the navigation menu. I tried the following media query, but it doesn't seems to be working for me i.e
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { .logo a.brand { display: block !important; }}
I'm confuse, Is this error because of display method or anything else (like I have to use media query for any other class)
I appreciate your help and your valuable time.
Thank you.
I have seen your website and after that i have created some of my own style element which i am sharing it's only for media screen max width 480px
Following Code
#media (max-width:480px){
.logo a.brand {
display: block !important;
height: auto;
line-height: 30px;
margin: 0;
overflow: hidden;
padding: 0;
width: auto;
}
.logo a.brand img {
float: none;
height: auto;
margin: 2px 8px 2px 0;
width: 100%;
}
header .logo{
float: none;
max-height: none;
text-align: center;
width: 100%;
}
}