I have an issue with responsive design on my site. The problem is that, when the page is loaded, I can see the "the mobile look" but its zoomed out. I think it's a problem that my page has some element which sets the width to some large number. Because of that I have a horizontal slider and a large empty white area on the right side of the screen.
Any ideas how to fix this?
Site is at http://www.studentskizivot.com/
I used viewport at header.php (head)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#media code :
html{
background:none!important;
width:100%;
}
#text-51, #text-79, #polls-widget-7 {
display:none;
}
#bglink{
display:none;
}
body {
background:none!Important;
margin:0px auto;
}
#footercontent .footerboxlast{
margin-top:15px;
}
#footercontent .footerbox {
width: 209px;
display: block;
clear: both;
float: left;
margin: 15px 16px 0px 0px;
border: #FF0000 solid 0;
padding: 0;
background: url(images/skin1/footer_bgrdbox.png);
font-family: "Open Sans";}
nav#primary-navigation{margin-top:15px;}
#header-widget-area{display:none;}
#topbar{padding: 0.4em 0.8em;}
#secondary-navigation select.tinynav{
font-size:1.4rem;}
div#main div#content div#wdsi-slide_in.wdsi-slide div.wdsi-slide-wrap{
display:none!important;
}
.logo-image-enabled #site-title {
line-height: 1.5;
width: 100%;
}
#topbar{width:100%!important;}
.logo-image-enabled #site-title { line-height: 1.5; width: 100%; }
.logo-image-enabled #branding{padding:0px;}
.topbar-enabled #header{background:#EEEEEE;}
#topbar{line-height:14px}
#topbar{padding: 0.4em 0.8em;}
}
Also , when I open the page in firefox for android, many of these css rules do not apply. Opera, Chrome, Maxton, all work well, but firefox is messy. Any clues why?
many, many thx!
In your source code, there is an element that has an inline style with a width of 1041px. Once you remove that your site is good. It's the last element in "#footer".
<div style="height:8px; width:1041px; background:#fff; position: relative; float:left;"></div>
Related
I recently read about that whole responsive web design subject, and have decided
to try and implement it on a project I'm working on.
The issue is the fact that I'm using 1280 width as a base point.
The formula I'm using is
target ÷ context = desired width
target = element desired width
context = my 1280 base point
Whenever the browser is resized that layout breaks, since context is no longer 1280px.
How can I over come this ? (See the code below)
If I set #wrap width to a fixed 1280px; wouldn't it cancel the responsiveness
effect?
<!doctype html>
<html>
<head>
<style type="text/css">
html {overflow-y: scroll; height:100%}
body {font:12px Arial, Helvetica, sans-serif; color: #616161; overflow:hidden; margin: 0; padding: 0; height: 100%; background-color: #eee}
#wrap {
background-color: #eee;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important; /* FF scroll-bar */
width: 100%;
}
#side-bar {
width: 17.890625%;
height:100vh;
float:left;
border-right: 1px solid #ccc;
padding: 10px;
}
#main-section {
float:left;
background-color: #fff;
width:80.46875%;
height:100vh;
overflow: scroll;
}
</style>
<body>
<div id="wrap">
<div id="side-bar"></div>
<div id="main-section"></div>
</div>
</body>
</html>
Border and padding widths aren't being taken into consideration when it's scaling.
If you add this to your CSS:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
Your padding and border width will be included as part of the x% and you should have no problem scaling.
You can add it too all elements like I did above, or just put it on #side-bar. I like using it throughout, it makes styling (especially for responsive) a lot easier.
You can set #wrap with max-width: 1280px;
#wrap {
max-width: 1280px;
width: 100%;
}
I have just recently created a website which uses multiple divs. I then zoomed in and out, and particular DIV's move to the left corner, whilst the others move to the right corner of the screen.
Below are the codes for my website, if anyone could help me it would be much appreciated. I have left out majority of the body after the header, as it is affected, but was thinking that this error was to do with one of the DIV's such as the "container" div, and not in a detail in each particular DIV.
HTML:
<html>
<head>
<title> Test Website</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="container">
<div id="top_section">
<div id="logo">
<img src="images/pbc_WHITE_bg.tif" width="180px" height="168px">
</div>
</div>
<div id="navigation">
<ul id="nav_menu">
<li>HOME </li>
<li> NEWS</li>
<li> MEDIA </li>
<li> CONTACT</li>
</ul>
</div>
</div>
CSS:
{
position: relative;
margin: 0;
padding: 0;
font-weight: lighter;
}
body {
padding: 0px;
}
p {
color: grey;
font-family: "brandon-grotesque",sans-serif;
font-size: 13px;
}
h1 {
color: black;
font-weight: lighter;
font-size: 14px;
font-family: "brandon-grotesque",sans-serif;
}
a {
font-size: 14px;
color: grey;
font-family: "brandon-grotesque",sans-serif;
}
#container {
margin: 0px auto;
/*background: pink;*/
width: 100%;
height: 169px;
border-bottom: 1px solid #F2F2F2;
}
#top_section {
width: 400px;
height: 170px;
/*background: black;*/
float: left;
}
#logo {
margin-left: 170px;
}
#navigation {
position: relative;
background: blue;
margin-top: 70px;
width: 700px;
float: right;
margin-right: 50px;
}
ul#nav_menu {
list-style-type: none;
}
ul#nav_menu li {
display: inline-block;
padding-right: 5px;
width: 150px;
text-align: right;
position: relative;
float: left;
}
ul#nav_menu li a{
text-decoration: none;
text-align: right;
}
The code you pasted is fine, the problem must be somewhere else that you neglected to share. The problems you see are likely a mix of using floats, text-align: right, and a mix of inline and block elements. Take the time to learn how each of these work together for more consistent and easy HTML development.
Use
overflow: auto;
in you css class where it is needed
OR you may also use
div {
border: 1px solid black;
width: 70px;
overflow: hidden;
white-space: nowrap;
}
There is something they call responsive design it might help you out ;)
it changes because of the fact that screen width isn't the same on every screen + if you scale down the browser window it also changes or on zoom in-out.
the solution is doing this:
you can fix this by using #media query's and a viewport in your css , and add this meta tag to your html:
<meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>
and with the #media query's and viewport you declare what size you have per screen width using this media query + viewport in css:
#media screen and (min-width: 820px) and (max-width: 920px) {
#viewport { width: 820px; }
// your css for screens between 820 and 920 pixels in width goes here
}
i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, #media screen and (min-width: 1200px){ #viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}
So this means you will have 6 times your css code which is adapted will be adapted to the size.
This is called adaptive or responsive design and is pretty easy to do
For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
A little tip if there are div's making your design or webpage flow over on the side's you might add overflow:hidden to those div's in the css this should fix that issue.
I have faced the same kind of problem and I was using pixels. Some say that we should use em instead of px. But it was not possible for me at that point to change all the pixels to ems.
I managed to prevent divs from moving on zooming out by making the size of the container div a little extra so that it can accommodate little change that happens on re-sizing the content while zooming. Hope this helps
I made a site with pictures and when i enter on the picture page and ...click on Next, Preview pictures the picture float to right. In IE work well but in Google Chrome, Mozilla,Safari ...the middle page float to right.
I tried change in css but nothink .You can help me pls?
Thanks in advance !
The class "content" i put in header and the css code
body {
/*background-color: none;
border-radius: 25px;
background-image:url('/images/gray_jean.png');*/
background: #ffffff;
color: #000000;
margin:0;
padding:0;
}
.content {
position:relative;
margin:0 auto;
margin-left: auto;
margin-right: auto;
text-align: center;
width:100%;
clear: both;
}
Thanks
Replace your current code to this,
.content {
margin:0 auto;
text-align: center;
width:100%;
}
Remove the position:relative; from the .content.
.content {
position:relative; // Remove this
}
And try, may be?
I have created a grid of thumbnail pictures, that when hovered over, the picture dissapears a block colour is shown with the title of the image on. but In internet explorer instead of the pictures and text appearing within their set thumbnail space they all cramp up in the left corner.
The image and title are stored within the box/ category-widescreen div, this is a dynamic code for wordpress.
Any ideas?
#page-wrap {width: 1060px; padding-bottom: 40px;}
.box { margin: 20px; float: left; }
.category-widescreen { width: 400px; height: 229px; background: #FF0000; }
.category-widescreen a{text-decoration: none;}
.category-widescreen h1{font-size: 30px; color: #FFF; line-height: 34px;}
.category-widescreen h2{font-size: 26px; color: #FFF; line-height: 30px;}
.title{position:absolute; top:14px; left:14px; z-index: 0; padding-right: 14px;}
.category-widescreen img { max-width: 400px; max-height: 229px; float: right; padding: 0 0 2px 10px; z-index:1; position:relative;}
Thankyou for any help!
Too vague! As the other guy suggests, give the basic html structure. However, some observations:
Aren't the font sizes used a bit too big (30px and 26px)?;
title{position:absolute; ...} .... make sure that the parent is styled with position:relative otherwise it will become a mess;
how about floating? Are you making sure things are floated in the right direction?
Hope have helped or at least opened your eyes wide-open! ha ha ha ...
You need to set position:relative to your posts so that the absolutely positioned elements know where to follow.
Try this:
.post {
position:relative;
}
I usually have my structure laid out something like this:
<div id="all">
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
Where the body will hold a background pattern, "all" will hold a dropshadow for the page going up and down, and "page" may often have a repeating-y background as well.
I have tried variations on using the css height/min-height properties:
html, body {
height:100%;
...
}
#all {
height:100%;
min-height:100%;
}
#page {
height:100%;
min-height:100%;
height:auto !important;
}
It seems like if I remove height:auto from "all" then it seems like it works UNTIL you scroll, then after the scroll the background for all dissappears
example
However if I keep the height:auto there then I get the problem of the background for page not working
example
Hopefully someone knows a fix?
Well, here's what I ended up with for the CSS:
html, body {
height:100%; /* IE6: treaded as min-height*/
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
color: #494949;
text-align: center;
background-color: #3f91a7;
background-image: url(images/bg_body.jpg);
background-repeat: repeat-x;
background-position: center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#all {
margin: 0px;
padding: 0px;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
height:auto !important;
background-image: url(images/bg_all.png);
background-repeat: repeat-y;
background-position: center top;
overflow: hidden;
}
#page {
width: 993px;
padding: 0 0 10000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: -10000px;
margin-left: auto;
text-align: left;
background-color: #FFF;
background-image: url(images/bg_page.jpg);
background-position: center top;
background-repeat: repeat-y;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
height:auto !important;
}
#header, #footer {
text-align: center;
font-size: 16px;
padding: 20px;
}
#content {
padding: 25px;
}
I haven't had a chance to test it in anything other than Firefox, but, hoipefully it will give you a good start.
I would just flip the location of your div#all and div#page...
<div id="page">
<div id="all">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
Although the question was posted some years ago, I ran into the same challenge and found this earlier thread today. Although I reckon there might be more fine solutions by now, I wanted to share the one I found today nevertheless.
Had the same problem, background 1 full screen, adaptive and fully below everything else and another repeating(-y) background number 2 should go on top, but not scroll out of sight because it was set to follow the height of the window which was given to the particular div which holds background 2.
Let's start with the divs I created:
<div id="full_background">
<img src="images/bkg_main.jpg" alt="" />
<div id="absolute">Contains background set to repeat-y</div>
<div id="content">Contains the content</div>
</div>
the css looks like this:
* { margin: 0px; padding: 0px; }
html { height: 100%; }
body { height: 100%; }
#full_background { width: 100%; min-height: 100%; position: relative; float: left; }
#full_background>img { position: absolute; top: 0; left: 0; position: fixed; width: 100%; z-index: 1; display: block; }
#full_background>div { position: relative; z-index: 2; }
#absolute { position: fixed !important; left: 0; width: 100%; height: 100%; background: url("../images/bkg2.png") top left repeat-y; }
#content { width: 290px; margin-left: 20px; padding: 30px; line-height: 1.7em; font-family: 'Lato', sans-serif; position: relative; float: left; }
First off, I added a full screen & resizing background image to my site (using the div full_background and the img tag) using the following solution (very easy css solution which works like a charm in every browser and most older versions down to for example IE7) - http://www.webdeveloper.com/forum/archive/index.php/t-256494.html > see last answer by aj_nsc
Next, using the following jQuery method - http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/ - I created a div with id = absolute, which is given the same height as the browser window (also on resizing). I placed my repeating(-y) background number 2 in here. Set this div to position:fixed and it will stay put when the div with the content is being scrolled through.
Then below this div you put the div with your content, which freely expands downwards beyond the browser window.
Upon scrolling, the two backgrounds will keep filling the full area of the browser window (vertically as well) at all times and stay put, with the content scrolling up and down over them.
This way, upon resizing, you also make sure that both backgrounds keep filling the full background area at all times.
I tested this solution in CH, FF, IE7-9 and Safari and it worked in all of them without any problems whatsoever.
Here's what's happening: You've set html & body to have a height of 100%, but that 100% is the height of the viewport, not the document. Since #all's height is set to 100%, it is set to 100% of the parent's height, which happens to be body, which is set at 100% of the height of the viewport. Everything's inheriting the height of the viewport.
The way to fix this problem is actually the same way you would fix clearing floats that have an outer container. All you have to do is put overflow:auto; on #all. You don't even need any height declarations on any other elements, and you may be able to eliminate either the #all or the #page div.
More info here: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Have you tried:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#all {
min-height: 100%;
}
? Only for IE 6, you should set height: 100%; for #all (because it interprets that basically as min-height (as a result of a bug). As IE6 doesn't understand the min-height attribute, height effectively becomes a replacement for min-height).
If you set height: 100%; for other browsers, they will take it as 100% height of the viewport, not 100% of the page, so scrolling won't work correctly.
My comment on the downvote:
It has become clear, that my answer doesn't solve the whole problem. What we have here, seems to be quite a complex case - at least no one here seems to have found an answer yet? I've even looked into Ingo Chao's excellent (German) book, which comes to the same conclusion: Setting the parent's height won't work, and setting the child's height won't work, if the parent's height wasn't set explicitly, but rather dynamically by the size of the content.
But my answer could still help to restrict the possibilities a little bit - because setting height on #all will most likely not work on any browser except IE 6. If you disagree, please post a comment, because in that case, I'd also like to learn more about this.
This worked for me:
#page {
width: 993px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
background-color: #FFF;
background-image: url(http://jeffkilroy.com/hosted/layout1/images/bg_page.jpg);
background-position: center top;
background-repeat: repeat-y;
/* height:100%; IE6: treaded as min-height*/
height: expression(document.body.offsetHeight); /* sets min-height for IE */
overflow: auto;
min-height:100%; /* real browsers */
/* height:auto !important; */
}
Forget 100% on the divs, try moving your background image to the html element and the full height border to the body.
html {
height:100%;
background-color: blue;
}
body {
margin: auto auto;
padding: 0;
color: #494949;
/*min-height: 100%; */
height:100%; /*for ie6*/
border-left:solid 2px red;
border-right:solid 2px red;
background-color:#fff;
width: 960px;
}
Have you tried this :
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
window.onload = init;
function init(){
document.getElementByID("all").style.height = getWindowHeight() + "px";
}
Or put page instead of all