I have a navigation bar which has padding to allow content to display under the navigation bar. For mobiles I want to lessen the padding but the media query doesn't seem to work. Any ideas to why?
Example:
body{
padding-top: 70px;
}
p.t{
color: white;
background-color: black;
top: 0px;
position: absolute;
}
#media only screen and (max-width: 767px) {
.body {
padding-top: 0px;
}
}
<body>
<p class="t">
This is my pretend navbar woo.
</p>
<p>
hello
</p>
</body>
You're doing .body instead of body. By using .body, the CSS is searching for an element with class="body", instead of an element <body>. Simple fix:
#media only screen and (max-width: 767px) {
body {
padding-top: 0;
}
}
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'm working on the media queries for a site and I'm stuck on a static logo image which sits within the header but only when the screen size is min-width 960px.
Above that size I have an interactive particle logo image but when the screen is reduced down to mobile-size I just want a logo in the header. The problem is the logo simply isn't showing. I suspect it is being hidden by the nav bar which is fixed in position.
This is how I have my code at the moment -
<header>
<div id="logo"> <img src="images/havoc_logo.png"> </div>
<nav>
Home
What we do
Who we are
Who we work with
Say hello
Blog
</nav>
</header>
styles.css/media queries
#logo {
width: auto;
height: auto;
}
#logo img {
width: 200px;
height: 100px;
}
/* RWD for logo (particle-slider is id for interactive logo) */
#media screen and (max-width: 960px) {
#particle-slider {
display: none;
}
}
#media screen and (min-width: 960px) {
#logo img {
display: none;
}
}
#media screen and (max-width: 480px) {
body {
max-width: 500px;
}
header {
height: auto;
}
nav {
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
nav a {
display: block;
border-bottom: 0;
}
#logo {
height: auto;
}
#logo img {
width: 200px;
height: 100px;
}
So, when I shrink the page right down to 480px or less then nothing shows in the header other than the nav bar. How do I show the logo image in the header when I shrink the page?
I found the answer with this Q&A here
Basically my nav was held in a fixed position and covering the logo so I had to revert the position:fixed rule to position:static
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.
While converting a page to responsive layout, css style resets after 620px breakpoint. The affected design part is as follows. Please note the following snippet working perfectly and given only to describe what I'm doing. The problem occurs only if it is combined with the full code.
.tfulltiny{
float: left;
width: 100%;
padding: 20px 0 20px 0;
}
.tblocktiny{
float: left;
text-align: left;
margin-top: 10px;
}
.tcelltiny{
float: left;
text-align: left;
color: #609;
font-weight: bold;
}
#media only screen and (min-width: 680px) {
body {
margin:0 40px 0 40px;
}
.tblocktiny{
width: 16%;
}
.tcelltiny {
width:100%;
}
}
#media only screen and (max-width: 680px) {
.tblocktiny{
width: 99%;
}
.tcelltiny {
width:100%;
}
}
<div class="tfulltiny">
<div class="tblocktiny">
<div class="tcelltiny">
<span>Planet</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Longitude (Deg:Min:Sec)</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Rasi</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Longitude (Deg:Min:Sec)</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Star</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Pada</span>
</div>
</div>
</div>
Expected output after 680px screensize:
But suddenly the style disappears while crossing 620px+
The full code is so big so I cant include it here, may be the bug is in that code. However I want information on what makes styling disappear. What are the possible issues and how to resolve this?
Edit :
After searching, I found 620px width used 2 times in code. Don't know it have some role in this error.
#media only screen and (min-width: 620px) {
.tblocksml{
width: 49%;
}
.tcellsml {
width:99%;
}
}
#media only screen and (max-width: 620px) {
.tblocksml{
width: 99%;
}
.tcellsml {
width:99%;
}
}
Try this https://jsfiddle.net/2Lzo9vfc/118/
CSS
#media only screen and (max-width: 680px) {
.tblocktiny{
width: 99%;
margin-top: 0;
}
.tcelltiny {
width:100%;
color: black;
font-weight: normal;
}
}
Other solution https://jsfiddle.net/2Lzo9vfc/119/
#media only screen and (min-width: 680px) {
body {
margin:0 40px 0 40px;
}
.tblocktiny{
width: 16%;
margin-top: 10px;
}
.tcelltiny {
width:100%;
color: #609;
font-weight: bold;
}
}
Finally found a fix to this problem. Actually it is just a trick, not a proper solution. The problem occurring due to #media overlaps. So the part which faces problem must be added first place in the code. That is, cut-paste the misbehaving code in top of css and the problem will be solved. However I know this is not a proper method, but it works for me. I'll change this answer from best when better answer arrives.
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.