Trying to make our wordpress theme responsive, starting off by adding
<meta name="viewport" content="width=device-width, initial-scale=1" />
within the header's head tags, and it has this effect on the footer...
any way of sorting this out? thank you in advance
You can not make site resposnive adding viewport to head of it.
Try with using media queries:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
AND you can use framework such as bootstrap:
https://getbootstrap.com/
You can add this code to additional CSS for now
#media only screen and (max-width: 768px) {
#footer {
float: left;
background: url(images/footer.jpg) 50% 0;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}
#footer p {
float: left;
width: 100%;
margin: 40px 0 0 0;
text-align: center;
color: #b5b5b5;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 18px;
}
}
Related
I started my first site from making mobile version. After that, i tried to add #media screen and (min-width: 500px) for desktops, but after that my mobile site looks like desktop. I don't understand why and don't know how to fix it. I kept mozilla's tutorials and that's it.
/* CSS */
body{
background-color: yellow;
display: flex;
margin: 1em;
flex-flow: row wrap;
}
html{
font-family: sans-serif;
}
header{
order: 0;
background-color: black;
color:blanchedalmond;
font-size: 3em;
padding: 0.5em 1em;
border-radius: 1em;
}
header nav{
border-top: 1px solid #999;
margin-top: 0;
}
header ul{
list-style: none;
padding: 0;
margin: 0;
}
...............
#media screen and (min-width: 500px)
{header{
display: flex; /* separate the nav and title */
justify-content: space-between;
align-items: center;
font-size: 1em;
width: 100%;
}
header ul {
display: flex; /* mav navigation display using flexbox */
}
header li {
margin: 0; /*remove the margin used in the mobile design */
}
header nav{
border:0;
}
}
Thanks in advance
if you want to make mobile first website you should
declare a max-width media-queray first at the above code and then the rest of your code will be applied to the desktop version
if you want to understand how both of them works
read below
Media Queries Demystified: CSS Min-Width and Max-Width
for mobile version.
#media screen and (max-width: 500px)
and then the rest of your code will apply for desktop-version
The CSS media query for small devices isn't working for Android when screen is rotated in landscape mode, the background color isn't changing, and the form overflows.
The site works good, when screen rotation is turned off, I don't know why is this happening, since there is no problem in IOS, only in Android.
The CSS code:
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body,
html {
height: 100%;
margin: 0;
}
body {
background: linear-gradient(to top left, #5487ab 17%, #ffffff 102%) fixed;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 549px) {
.houseImg {
display: none;
}
.container {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #f1f1f1e0;
height: 386px;
width: 278px;
border-radius: 9px;
margin: auto;
margin-top: 4rem;
}
.brand {
display: block;
margin: auto;
width: 29%;
padding-top: 28px;
}
.brandName {
font-family: 'Source Serif Pro', serif;
display: block;
text-align: center;
font-size: 19px;
color: #0060a3;
letter-spacing: 0.4px;
margin: 0;
margin-top: 7px;
}
.usrTxtField {
background-color: #f1f1f1e0;
width: 237px;
height: 31px;
border: 1px solid #8c8b8b;
border-radius: 7px;
font-size: 16px;
padding-left: 8px;
font-family: 'Maven Pro', sans-serif;
color: #252525;
transition: none;
display: block;
margin: auto;
}
.usrTxtField:focus {
border: 2px solid #3d79a2;
}
.usr {
margin-left: 20px;
margin-bottom: 4px;
margin-top: 20px;
font-family: 'Maven Pro', sans-serif;
font-size: 12.5px;
color: #5a5a5a;
}
.submitLogIn {
background-color: #0060a3;
border: none;
display: block;
margin: auto;
text-align: center;
height: 40px;
width: 125px;
margin-top: 17px;
border-radius: 25px;
color: #fff;
font-size: 14px;
letter-spacing: 0.4px;
font-family: 'Maven Pro', sans-serif;
cursor: pointer;
}
.checkboxSave {
margin-left: 20px;
margin-top: 10px;
}
.saveText {
font-family: 'Maven Pro', sans-serif;
color: #5a5a5a;
font-size: 12px;
}
.forgotPassword {
font-family: 'Maven Pro', sans-serif;
color: #0060a3;
font-size: 12px;
text-decoration: none;
margin-left: 18px;
}
}
The HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Art</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro:600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Maven+Pro:500&display=swap" rel="stylesheet">
</head>
<body>
<div class="gridContainer">
<div class="container">
<img src="img/artLogo.png" class="brand">
<p class="brandName">ART PS GROUP</p>
<form autocomplete="off">
<p class="usr">Username</p>
<input type="text" name="usrTxt" class="usrTxtField">
<p class="usr">Password</p>
<input type="password" name="password" class="usrTxtField">
<input type="submit" name="submit" value="Log In" class="submitLogIn">
<input type="checkbox" name="save" class="checkboxSave"><span class="saveText">Remember me</span>Forgot Your Password?
</form>
</div>
<div class="container2">
<img src="img/birdHouse.jpg" class="houseImg">
</div>
</div>
</body>
</html>
This happens because your android device screen has a height greater than 549px (considering your media query specifications). Naturally in landscape mode, this height becomes device width and hence your media query is ignored.
this is the media query you can target for almost all phones
/* phones (portrait and landscape) ----------- */
#media only screen and (min-width : 320px) {
/* Styles */
}
/* phones (portrait only) ----------- */
#media only screen and (max-width : 480px) {
/* Styles */
}
It is not possible to accomplish responsive design with only one media query. For making responsive design right, please visit and check this site, where media queries are explained and are examples on how to use it.
Android phone and iOS phone doesn't necessarily use the same width and height, most iOS phones uses width: 375px and height: 667px(or width: 667px and height: 375px when in landscape mode), although that is only for iPhone 6/7/8 excluding Plus and other models, you can check width/height which phone use which in Chrome/Mozzila Firefox/etc. in developer mode while emulating mobile devices.
Giving fixed width for DOM elements can mess up the view in small devices. particularly when the given width is not available as the device width goes less than that width.
So while writing media queries for smaller devices, say mobile phones, It would be great if you replace all the fixed widths to percentages. So that they will not overflow from the available space and will stay within the device width.
If you are having issues specifically for landscape, you can handle them using media query and orientation combination.
#media all and (max-width: 768px) and (orientation: landscape) {
}
Above code is enough for writing rules for small devices when used in landscape orientation.
I need your help, I face a problem with my css media query code.
I just wrote the following css media code
#media (max-width: 900px) {
#content {
width: 100%;
margin: auto;
}
#recent_activities .act {
width: 94%;
padding: 3% 10px;
background-color: #FFF;
text-align: left;
margin-bottom: 10px;
margin-left: 0px;
height: inherit;
}
#header_container
{
display: none;
}
#footer {
width: 94%;
margin: auto;
padding: 3% 0px;
text-align: center;
}
}
my problem is that the code works perfectly on the computer screen when I re-size the browser window but unfortunately it does not work on my smart-phone (Xperia Z).
Just put the following meta tag in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
hope that helps.
I am having this CSS style, which i am trying to run on chrome v28, Firefox v222 and IE8:
html, body{
margin: 36px;
width: 100%;
background-color: black;
}
#media screen and (max-width: 768px){
html, body{
width: 100%;
height: 100%;
}
#page {
margin: 20px;
width: 100%;
background-color: red;
}
}
and as a markup I add:
<!DOCTYPE html>
<html>
<head></head>
<body><div id="page"></div></body>
</html>
Just want to understand why it is not changing color to red if I minimize the window.
Any Help will be great help.
Thanks
Raja
#page has no content thus it has height:0px; Try the following: (working jsFiddle)
#media screen and (max-width: 768px){
html, body{
width: 100%;
height: 100%;
}
#page {
margin: 20px;
width: 100%;
height:100%; /* set the height */
background-color: red;
}
}
As for the addition to the question - changing the background - You will have to reverse the order of the CSS like this:
<style>
html, body{
margin: 36px; width: 100%; height: 100%;
}
body{ background-color: black; } /* This should be first for the media query to override */
#media screen and (max-width: 768px){
html, body{ margin: 20x; }
body{ background-color: red; } /* When the media query is applied this overrides the previous rule */
}
</style>
It's actually two part question regarding my simple page (that will be replaced some day with real content), HTML+CSS boilerplate used there for vertical centering and IE7.
http://engitize.net/
Can anyone provide detailed explanation why the page is displayed correctly in non-IE browsers (Chrome, Fx, Opera), almost all semi-recent to recent IEs (IE5.5, IE6, IE8, IE9), but not in IE7?
I am especially interested in: it works in IE6, yet it doesn't work in IE7, because... kind of explanation.
What should be changed to make div#c properly centered vertically in IE7?
I am using specific height for div#c, but used boilerplate is height-agnostic and fix should preserve this feature.
Spoiling other browsers is not an option, unless it's IE5.5 (ok, IE6 too, but only if it is really unavoidable).
Changing <!DOCTYPE html> and turning IEs into quirks mode is also not accepted (and it's a pretty bad practice for newly developed pages).
If you don't have IE7 (just as I), you can visit http://ipinfo.info/netrenderer/ or http://browserling.com/, paste URL there and choose IE7 to see the problem yourself.
Because the page will change after accepting some answer, I'm providing snapshot of relevant HTML and CSS parts from it (with logo URL changed to be absolute).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body { height: 100%; }
body { background-color: #fff; color: #000; margin: 0px; padding: 0px; }
div { margin: 0px; padding: 0px; }
#outer { position: relative; width: 100%; height: 100%; overflow: visible; }
#outer[id] { display: table; position: static; }
#middle { position: absolute; top: 50%; width: 100%; text-align: center; } /* for explorer only*/
#middle[id] { display: table-cell; vertical-align: middle; position: static; }
#c { position: relative; top: -50%; } /* for explorer only */
#c { width: 385px; height: 120px; margin-left: auto; margin-right: auto; }
#c { background-image: url(http://engitize.net/engitize.png); background-repeat: no-repeat; background-position: center top; }
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
</style>
</head>
<body>
<div id="outer"><div id="middle"><div id="c"><div>
because history is important!
</div></div></div></div>
<div id="footer"><div>
<p style="float:left;"><strong>Przemysław Pawełczyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;">Przemoc's network</p>
</div></div>
</body>
</html>
your Q#1 has been answered by #thirtydot, IE7 and below does not support the CSS table properties so another way has to be found for them. and his absolute positioning technique is usually the preferred way to do this as most times in a scenario like this (splash page?) the width and height of the centred content would be known.
addendum to above per comments:
In answer to why it was working in IE6 and not IE7 even though IE6 doesn't support the table properties either, IE7 was actually picking up the position: static rule from the #middle[id] {} rule - IE7 does understand this type of selector so this means the later absolute/relative positioning was not working the same as it was in IE6
Taking the above into account redoing the CSS to make sure IE7 and 6 got the same CSS and that it was placed later in cascade to override the "good" CSS it turns out the the positioning method is height agnostic too, in the comments there are various links to to test this, but here is the final working version:
Hybrid table cell/positioning method : here
That fiddle does include the image width and heights, but if you remove them and the positioning for the "sub text" it does (or should) show that whatever is in the middle does stay centered
HTML used is the same as the bottom of this answer.. minus the extra <i></i> element
CSS:
html, body { height: 100%; margin: 0; padding: 0;}
body { background-color: #fff; color: #000; }
#outer {
position: relative;
width: 100%;
height: 100%;
display: table;
}
#middle {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#c {
width: 385px;
height: 120px;
margin: 0 auto;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
/**** for IE7 and below ****/
/* hacks but there is another method below */
#middle {
*position: absolute;
*top: 50%;
*width: 100%;
*text-align: center;
}
#c {
*position: relative;
*top: -50%;
}
/**** end IE7 and below rules ****/
#c div {
position: relative;
top: 100px;
width: 100%;
color: #666;
font-weight: bold;
font-family: serif;
font-size: 12px;
text-align: right;
}
#footer {
width: 100%;
text-align: center;
height: 15px;
padding: 5px 0 0 0;
margin: -20px auto 0 auto;
border: 0;
background-color: #def;
}
#footer div {
padding: 0px 5px 0px 5px;
text-align: right; font-size: 10px;
font-family: sans-serif;
}
#footer p {margin: 0;}
As pointed out in comments using the technique that the HTML5 boilerplate uses to class the HTML element conditionally see:
Conditional stylesheets vs CSS hacks?
Answer: Neither!
means you could replace the IE7 hacks with:
.ie6 #middle, .ie7 #middle {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
.ie6 #c, .ie7 #c {
position: relative;
top: -50%;
}
Original alternative - "Matchstick Technique"
You could likely mix the following technique with the "table-cell" technique via conditional comments or hacks, but this (hacky!) technique works across browser as far as my tests have seen
As you've asked for a height agnostic version.. you might or might not like the "matchstick" technique, this involves using inline blocks and lining them up.. the "matchstick" is a 100% high empty, off page, inline-block element with its vertical-alignment set to "middle" once it's in place the next inline-block (your actual content div) sits beside it and aligns to the middle or it, then using text-align: center; on it you have the horizontal centering too
here's a link to a working example fiddle
Note: I've left your widths intact, but you can test without widths/heights by removing the height & width off #c and also remove the CSS for the #c div text div - in a plain text scenario entering text into either of these divs should 'auto' centre.
and especially note the insertion of the extra <i></i> HTML just inside the outer div (that's likely why this is not a preferred method!), this is the "matchstick" that props the whole page open.
Code used in fiddle:
html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: #fff; color: #000; }
#outer { position: relative; width: 100%; height: 100%;}
/* a matchstick spacer */
#outer i {
display: inline-block;
height: 100%;
width: 1px;
margin-left: -1px; /* to hide off page */
margin-right: -4px; /* to remove spacing between this and #middle block */
vertical-align: middle; /* will make inline block next to it center vertically */
background: #f00; /* red, not required just to see or not see it */
}
#middle {
display: inline-block;
width: 100%;
text-align: center;
vertical-align: middle;
}
/* image 385 * 120 */
#c {
display: inline-block;
/* presuming image heights, but it wouldn't matter if there was width/height here or not */
width: 385px;
height: 120px;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
#middle, #c { /* IE hack for inline block on block level elements */
*display: inline;
}
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
HTML:
<div id="outer">
<i></i>
<div id="middle">
<div id="c"><div>
because history is important!
</div></div>
</div>
</div>
<div id="footer">
<div>
<p style="float:left;"><strong>Przemys?aw Pawe?czyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;">Przemoc's network</p>
</div>
</div>
IE7 does not support display: table-cell, which you're using as part of your vertical centering technique.
Your page was relatively simple, so I simplified the HTML/CSS a lot. The centering now works properly everywhere I've tested it.
Complete code: http://jsbin.com/azuhe4
The line that's causing this behavior is...
position: static
...on the "#middle" CSS spec.
If I disable that line IE7 seems to render (more or less) the logo in the middle of the page.
It's the <!DOCTYPE>.
IE6 & 7 were a little flaky with that (that's what I've read, anyway).
If you do the following, you'll see things come around - with your code (no edits, save for a couple borders to see what's happening).
Here's what I did:
Deleted your <!DOCTYPE>
Added to your DIV {} CSS line - border:1px dotted gray
At your "outer", "middle", and "c" divs, a threw an inline border-color just to see which was which.
Hit Refresh
Then pasted <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, and hit Refresh again. Looked fine to me. Centered vertically, horizontally.
As of April 20, 2011 W3C states <!DOCTYPE HTML> as "Not a Standard". Certainly, IE6/7 have no idea what that tag means. http://www.w3.org/QA/2002/04/valid-dtd-list.html
I got new and easy solution for that:
<style>
.vam{vertical-align:middle;}
</style>
<div style="line-height:200px; border:1px solid #000000; height:200px;
text-align:center;color:#FFFFFF; font-size:1px;">
.<img src="her-banner.jpg" alt="" class="vam" />
</div>