Wow I am really struggling.
I have created responsive themes for many many sites but can't get it to work on my own!
The dev version of the site is at Development Site and the CSS for the phone part of the stylesheet is below:
#media only screen and (max-width: 767px) {
* {
float: none!important;
width: 100%!important;
}
#container, #home-boxes, #header, #home-scroller, #main-nav, #main-footer, #content, #sidebar {
width: 100%!important;
overflow:hidden;
float: none;
}
.wrapper {
width: auto;
margin: 0;
}
#header {
width: auto;
}
#home-scroller h1 {
font-size: 50px;
}
#home-scroller h1 span {
font-size: 30px;
}
#home-scroller p.home-price {
font-size: 30px;
}
#home-scroller a.button, #home-scroller a.buttonalt {
display: block;
}
#home-scroller p.bottom {
position: inherit;
}
ol.dots { display: none; }
#home-scroller li {
width: 100%;
}
#main-nav {
float:none;
}
#home-boxes-inner .home-box, .footer-box {
float: none;
width: 100%;
margin-right: 0;
}
img {
width: 100%;
height: auto;
}
#logo {
float: none;
}
}
As you can see if you visit the site on a mobile it's not even close to being anywhere near correct.
Does anyone have any pointers on where I should be looking?
Much appreciated!
The hard coded html-width conflicts with this nice meta setting :
html {
min-width: 1060px; /* hard coded width for large screens */
}
#media only screen and (max-width: 767px) {
/* new: fit viewport to small device screen */
min-width: 100%
}
Try changing your meta width tag from
<meta wisth...
To
<meta width...
Related
I'm making a site using the Divi theme (elegant themes) in Wordpress. I've been trying to get rid of the white space under the footer but have been unsuccessful. I've tried applying the Sticky Footer CSS and trying different padding/margins in the footer id, html and body. The site is thedaltondaleygroup.org.
I've created a page with divi builder and then copied the shortcode from revisions into footer area #1.
Here's the css code I've tried, this is attempting to apply the sticky footer css:
html, body {
height:100%;
}
#main-content {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
#main-content:after {
content: "";
display: block;
}
#main-footer, #main-content:after {
height: 142px;
}
.et_pb_gutters3 .footer-widget {
margin: 0 .5% 3% 0; */
}
Here's the rest of the code I have for the footer if there's anything conflicting:
#main-footer {
box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.3);
padding-bottom:1%;
}
.et_pb_row .et_pb_row_3 .et_pb_gutters2 .et_pb_row_fullwidth et_pb_row_1-2_1-4_1-4 {
width:100%;
max-width:100%;
}
#footer-bottom .container, #main-footer .container{
margin-right: 2.773%;
margin-left: 2.773%;
width:94.454%!important;
max-width: 94.454%;
}
#main-footer .fwidget.et_pb_widget {
width: 100%!important;
max-width: 100%!important;
}
#footer-widgets .footer-widget li:before {
display: none;
}
html #footer-widgets .footer-widget .et_pb_widget:not(.woocommerce) ul li {
line-height: 26px;
padding-left: 0px;
}
#footer-widgets {
text-align: center;
color: #ffffff;
padding-top: 2%;
width: 100%;
height: auto;
}
:not(.et_pb_fullwidth_section).et_pb_section {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#footer-bottom {
padding: 0;
}
#main-footer {
width: 100%;
height:auto;
}
/* Footer Columns - Centered */
.footer-widget { margin-right: 0; text-align:center;}
.footer-widget:nth-child(1) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 32%; margin-right:0;}
.footer-widget+.last{display:none;}
#media only screen and (max-width: 980px){
.footer-widget:nth-child(1) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 30%; margin-right:0;}}
#media only screen and ( max-width: 767px ) {
.footer-widget:nth-child(1) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 100%; margin-right:0;}}
Before I write any css code I usually type out html,body,p,h1,h2 { margin:0; padding:0;} etcc...This usually fixes it for me,
Or you can google a css reset page and they have most of that pre-written...
hope this helps.
If you have a menu in the bottom/footer with dropdown menus, make sure in the design>Layout to set "Dropdown Menu" to "Upwards". If not it will cause white space.
I have seen that other persons have asked the same question, but the solution does not apply to this problem. The solution should preferably work on different devices, such as iPhone, iPad, etcetera, so a generic solution is preferable - not something that just works on one device.
I have tried to set text-align:center and also tried to set margin-left:auto and margin-right:auto , but it doesn't work.
Html (only the relevant code is included):
<div class="container">
<div class="buttonyear"> <img class="buttonyear" src="./navi/yearen.png" /><span>2014</span></div>
<div class="buttonyear"> <img class="buttonyear" src="./navi/yearen.png" /><span>2013</span></div>
<div class="buttonyear clearfix"> <img class="buttonyear" src="./navi/yearen.png" /><span>2012</span></div>
<br/>
<br/>
</div> <!-- end of navi -->
Css:
.container {
max-width: 48rem;
width: 90%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
body{
background-image: url(../images/gradient.jpg);
}
// todo improve css..ask on stackoverflow..
.navi {
width:100%;
text-align:center;
text-align: center;
margin-left: 42%;
margin-right: 42%;
}
.buttonyear
{
float: left;
}
.buttonyear a
{
text-decoration: none;
}
.logocontainer {
text-align:center;
}
.logo {
width:180px;
height:60px;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Small screens (default) */
html { font-size: 100%; }
/* Medium screens (640px) */
#media (min-width: 40rem) {
html { font-size: 112%; }
}
/* Large screens (1024px) */
#media (min-width: 64rem) {
html { font-size: 120%; }
}
ul {
list-style-type:none;
}
.buttonyear {
position: relative;
width: 42px;
height: 20px;
}
.buttonyear span {
left: 0;
position:absolute;
width: 100%;
color: white;
font: 12px Gill Sans;
font-weight:600;
text-decoration:none;
text-align:center;
width:42px;
height:20px;
padding-top:2px;
position:absolute;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Fiddle: http://jsfiddle.net/wzhwtvmt/
What you want to do is put a container around your buttonyear divs that will center everything appropriately. I've created a fiddle for you with what I think you want. You'll have to modify it to your needs, but it centers all of your buttons within the container. Use your media queries to break them up at the right sizes.
http://jsfiddle.net/vtgw5zfg/
I had some time on my hands, and messed with your code a bit. Here's an updated version that centers things horizontally and vertically based on size. It also uses a bit of JavaScript and jQuery to center your span's. It's not perfect, but should help get you started.
http://jsfiddle.net/vtgw5zfg/1/
In this below CSS structure, the RIGHTCOLUMN, CONTENT, LEFTCOLUMN needs to open in the same order one by one. That is the properties of #rightcolumn #content #leftcolumn should be visible in the same order of screen as 1,2,3 (for low width resolution devices below 600px)
As Below:
header
title -
description -
rightcolumn -
content -
leftcolumn -
footer
One gentle man Mr.Pschueller helped me with Media queries. It was useful. But its just for 2 columns, that it #content and #leftcolumn.
When i try the same for 3 columns my brain Hangs. So i may need some one help. The code is given below. I don't know where I am wrong.
The present screen status of this code is:
header -
title -
description -
content -
rightcolumn -
leftcolumn -
footer
So the RIGHTCOLUMN should open BEFORE CONTENT without overlapping. This is my issue now.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color:#333
}
p {
padding: 10px;
}
#wrapper {
width: 100%;
min-width: auto;
max-width: auto;
margin: 0 auto;
}
#header {
float: left;
height: 80px;
width: 100%;
background: #3b5998;
}
#title {
float: left;
height: 40px;
width: 100%;
background: #ffffff;
}
#description {
float: left;
height: 40px;
width: 100%;
background: #f2f2f2;
}
#leftcolumn {
background: #FFFFFF;
width: 200px;
float: left;
margin-left: -100%;
}
#rightcolumn {
background: #FFFFFF;
width: 340px;
float: left;
margin-left: -340px;
}
#content {
background: #FFFFFF;
margin-left: 201px;
margin-right: 340px;
}
#contentliquid {
float: left;
width: 100%;
}
#footer {
height: 30px;
width: 100%;
background: #3B5998;
clear: both;
}
#media screen and (max-width: 600px) {
#content {
margin-left: 0;
margin-right: 0;
float: none;
}
#rightcolumn {
margin-left: 0;
margin-right: 0;
float: none;
}
#leftcolumn
{
margin-left: 0;
margin-right: 0;
float: none;
}
}
I solved the issue myself:
The last code of the Media queries is edited as follows and it is able to work even in 240x320 Screen resolution. As i expected now I am able to open the site in blackberry phone in the order 1,2,3 which results header title - description - content - rightcolumn - leftcolumn - footer
Below is the editing I made at the end: Note: If you add flot in the last LEFTCOLUMN then the screen will start to overlap.
I am not a Designer or a Programmer. But i am doing this for time pass by learning simple things. So those who are professionals don't joke with my addings.
On the browsing way i came to this stackoverflow and finally my problem is solved.
Thanking you.
#media screen and (max-width: 600px)
{
#content {
margin-right: 0;
margin-left: 0;
float: none;
}
#rightcolumn {
margin-left: 0;
float: none;
}
#leftcolumn
{
margin-left: 0;
}
}
I have a few media queries on my CSS. They were working perfectly a few days ago but I've just noticed that none of them are doing anything. Here they are in context (at the end), and this is my code:
/* MOBILE OPTIMISATION */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
width: 89%;
margin: 0;
}
.post-entry {
width: 100%;
}
.widgets {
display: none;
}
p.frontpage_jobs {
width: 100%;
float: none;
}
#blog-wrap {
width: 100%;
}
.post-entry header h1 {
font-size: 1.5em;
}
}
/* TABLET OPTIMISATION */
#media screen and (max-width: 800px) {
body {
width: 89%;
//float: none;
margin: 0;
}
.post-entry {
width: 100%;
}
.widgets {
display: none;
}
p.frontpage_jobs {
width: 100%;
float: none;
}
#blog-wrap {
width: 100%;
}
.post-entry header h1 {
font-size: 1.5em;
}
}
#media screen and (max-width: 1200px) {
#main-content {
width: 1200px;
}
.widgets {
display: none;
}
}
EDIT
My site is here.
Your media-queries seems to be working. Looks like you have an overflow problem. Removing "width:850px;" on .post-entry, the widths set for #main-content and the side-paddings on body as well as "width:98%;" solves the problem on the client-side for me.
That is, if it is a fluid resizing you are looking for.
I'm sure this is quite a basic question, so apologies in advance as I am new to this.
I am working on a web app that is designed to be mobile first. As all my initial layouts are designed for small screens I have introduced a mobile phone jpg as an <img>. Then I have overlaid my canvas onto this using absolute positioning. This gives me a pseudo mobile screen I can use whilst experimenting with my design without having to constantly test with the handset.
The idea is to then use suitable media queries to which when encountering smaller screens use display:block to prevent the image being displayed.
For a short time I had it working, but now I've broken it (with no backup)) and can't see how! It works alright on the wider desktop screens. The image container is displayed and the backdrop canvas is correctly laid over the top. However the image container is also being displayed on mobile devices (and as there is no absolute position) my real layout is then displayed after the .
The HTML looks like this ...
<div id="container">
<img src='phone.jpg' class="desktop-visible"/>
</div>
<div id="backdrop">
Text
</div>
My CSS is currently this ...
// Set Defaults
.desktop-visible { display:none;}
// Desktop and landscape tablets
#media (min-width: 768px) {
.desktop-visible { display: block; margin: 0 auto; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
position:absolute;
margin: 0 auto;
}
#backdrop {
margin: 0 auto;
position:absolute;
top:86px;
left:26px;
width:483px;
max-height: 862px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
// Portrait tablets and landscape mobiles
#media (max-width: 767px) {
.desktop-visible { display: none; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
// Portrait mobiles
#media (max-width: 480px) {
.desktop-visible { display: none; }
#container {
display: none;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
You're not closing the first media query. :-)
// Set Defaults
.desktop-visible { display:none;}
// Desktop and landscape tablets
#media (min-width: 768px) {
.desktop-visible { display: block; margin: 0 auto; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
position:absolute;
margin: 0 auto;
}
#backdrop {
margin: 0 auto;
position:absolute;
top:86px;
left:26px;
width:483px;
max-height: 862px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
} // you missed this one
// Portrait tablets and landscape mobiles
#media (max-width: 767px) {
.desktop-visible { display: none; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
// Portrait mobiles
#media (max-width: 480px) {
.desktop-visible { display: none; }
#container {
display: none;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}