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.
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've been trying to write some simple media queries, but I was stuck right after I started. It seems like media queries only work on text and not on divs and images.
This is my css code along with the html.
#media (max-width: 720px) {
.logo {
margin-top: 30px;
margin-bottom: 20px;
width: 100%;
}
<!-- only this piece of query works --> .text {
border-bottom: 2px solid red;
}
.gif {
clear: right;
}
}
body {
background-image: url('website/resources/images/body.png')
}
.logo_container {
width: 700px;
height: auto;
margin-top: 60px;
margin-bottom: 40px;
}
#logo {
width: 100%;
height: auto;
}
.text {
font-size: 30px;
margin-bottom: 60px;
}
.gif {
float: right;
}
<center>
<div class="logo_container">
<img id="logo" src="logo.png"></img>
</div>
<div class="text">some text ...</div>
<div class="gif">
<img src="under_construction.gif"></img>
</div>
</center>
Acording to this code image should strech to 100% of the window width right after window size comes under 720px and gif which float to the left of the text should clear its float and go under the image. But nothing happens, except text gets a red border.
I've tried some different formats of media queries, #media () {}, #media screen () {}, #media only screen () {}, #media screen and () {}, #media only screen and () {} but none of these seem to work for images and divs.
Here is my whole code:
http://pastebin.com/0bvUrZnU
OK so your media queries are not great.
Firstly lets change media to : #media handheld,screen and (max-width: 720px)
This will allow your query to be read across the board by DPI changes resolution changes it will even work in things like iframes and pretender box's and emulators it all basically.
Now also as a rule of thumb your media queries should be at the bottom of your style sheet. We do this because style sheets are read from top to bottom so all overriding styles should go underneath original style rule's.
so you want this :
You were missing a . before text and also use float:none; when canceling a float.
I have also tidied up your html a little also with <img> tags always define the height and width withing the tag itself like so <img width="300" height="100" /> and then use css to override it. this is so the browser can render the image faster because it knows its proportion's & you should all ways have an alt attribute. finally images are not wrappers they do not need to end in </img> instead just finish it all off like this: <img width="300" height="100" alt="iam an image and if i wanted to be responsive i should have max-width:100%; height:auto; as my CSS rule." />
body {
background-image: url('website/resources/images/body.png')
}
.logo_container {
width: 700px;
height: auto;
margin-top: 60px;
margin-bottom: 40px;
}
#logo {
width: 100%;
height: auto;
}
.text {
font-size: 30px;
margin-bottom: 60px;
}
.gif {
float: right;
}
#media handheld,
screen and (max-width: 720px) {
#logo {
margin-top: 30px;
margin-bottom: 20px;
width: 100%;
}
.text {
border-bottom: 2px solid red;
}
.gif {
float:none;
}
}
<center>
<div class="logo_container">
<img id="logo" src="logo.png" alt="all images should have alts and use width and height" />
</div>
<div class="text">some text ...</div>
<div class="gif">
<img src="under_construction.gif" alt="all images should have alts and use width and height" />
</div>
</center>
on your desktop code you target logo as an id #logo and in your media query you target it as a class .logo
It works as expected but you have some problem in code inside your media query. You are referring it as class instead of id
#media (max-width: 720px) {
/*this is id but you just referred it with .logo which isn't present*/
#logo {
margin-top: 30px;
margin-bottom: 20px;
width: 100%;
}
/*only this piece of query works*/
.text {
border-bottom: 2px solid red;
}
.gif {
clear: right;
}
}
I had the same problem after css lint suggested to remove
* {
margin: 0;
padding: 0;
I replaced that and media queries worked again.
Most issues that I have come across with Media Queries not working as expected are due to the order they appear. Sometimes they can get out of order unexpectedly, especially when changing from min to max or vice versa.
When using max-width, check to make sure all queries appear largest to smallest width (1200px, then 992px, etc).
When using min-width, check to make sure all queries appear smallest width to largest (576px, then 768px etc).
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%;
}
}
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 ?
Hello when I go and view my website my mobile view for my menu is still showing. I want it to go back to normal. after 768px;
I have looked every where can find out why its doing it like that.
http://codepen.io/mwbcomputers/pen/jvpcq
You have display: none; within your media query for 1024
#media only screen and (max-width: 1024px) {
#container {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.nav {
display: none;
}
// more css
Remove the following code from the media query
.nav {
display: none;
}