When running my login page on IE 11 with a screen size of less than 700px, the site looks like this:
The space on the right hand side that causes scrollbars that should not exist. I usually would assume that there is something overflowing, but I don't see any content that would cause this behaviour.
Here is a rundown of the page's code:
https://codepen.io/bitz/full/brayEb/
I was thinking that it has something to do with the way I set the width:
html {
height: 100%;
width: 100%;
margin: 0;
background: rgb(90, 103, 113);
font-family: Arial !important;
font-size: 12px !important;
}
But I tried changing it a bit to no effect.
Try to take this off from your CSS
#media only screen and (max-width: 1000px) {
body#login-body
{
background-size: contain;
}
}
Turns out IE does not like transform css at all, so I opted to center the objects in a different way, as outlined here.
Basically:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
Instead of the system that was used in the codepen.
Related
I am working on a responsive website, and am having problems with Media Queries.
I have 2 div's, side by side set at 50% width, with float: left and float: right assigned to them respectively. On resize, I wish to remove these floats and display the divs width at 100%.
This is not working however.
Here's my code;
#media only screen and (max-width: 700px) {
#block-half-left, #block-half-right {
float: none;
width: 100%;
}
}
#block-full {
width: 100%;
height: 200px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
}
#block-half-left {
width: 50%;
height: 200px;
background-color: gray;
float: left;
}
#block-half-right {
width: 50%;
height: 200px;
background-color: green;
float: right;
}
The problem is not in the code itself, but its order of appearance.
First of all: You should avoid using !important to fix problems like this, since it is usually just a matter of being more specific on where the styling points.
In this case, however your Media Query is stated first, and after that you're stating the "other" part. CSS (like most languages) is read from top to bottom. If you just move your Media Query to the bottom of your CSS, your problem should be solved.
Specificity is important in CSS.
The simplest way to increase the specificity of your non-floating blocks are to move the rules to the bottom.
E.g:
#block-half-left {
width: 50%;
height: 200px;
background-color: gray;
float: left;
}
#block-half-right {
width: 50%;
height: 200px;
background-color: green;
float: right;
}
#media only screen and (max-width: 700px) {
#block-half-left, #block-half-right {
float: none;
width: 100%;
}
}
More on specificity: https://developer.mozilla.org/en/docs/Web/CSS/Specificity
Furthermore, you'll have a much easier time dealing with specificity in CSS if you use classes, rather than IDs. I.e. .block rather than #block.
I am trying to make a responsive blog. Here is my code for my two halves:
.masthead {
background-color: $hot-orange;
float:left;
position: fixed;
height: 100%;
width: 32%;
#include mobile {
text-align: center;
}
}
.main-body {
float: right;
width: 68%
}
Here is the container that is wrapping both:
.container {
margin: 0 auto;
max-width: 1250px;
width: 100%;
}
Am I doing anything wrong? When I open the inspector and highlight both halves, it looks like the right half (the main-body) overlaps with the left slightly. I can't seem to find the issue.
Here is my repo
I have been coding using position: absolute and then using media query's to find different resolutions and adjust items on the screen to that resolution. After looking around people have said that its better to have a design that is fluid and adjust automatically.
I had an attempt yesterday on my login screen and I managed to get it working. On my next screen I think it is a bit more difficult as I have images that need to be scaled.
Here is my layout of my page:
.wrapper {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.bsimplex-header-bar {
margin-right: 10px;
margin-left: 10px;
width: 98.7%; /* 940 divided by 960 */
}
.content {
width: 98.7%;
margin-top: 38px;
margin-right: 10px;
float: right;
height: 79.5%;
margin-right: 10px;
}
.bsimplex-footer-bar {
width: 100%;
bottom: 0;
position: fixed;
margin-right: 10px;
background-color: #6a3d98;
margin-left: -10px;
}
Now I have 4 images that need to be in the middle of the screen side by side, would I wrap these 4 images in there own div or how can I achieve this scaling effect?
To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
or use Bootstrap framework
//sorry for the bad formating, i am on my phone...
When someone asks how to center a page, then the response is like:
margin-left:50%;
left:(-1/2 width);
I used this code on a site with a width of 1000px,so it comes to screens, where this site does not fit.
Now the site gets centered on the smaller screen and gets equaly pushet to left and right.
So lets say, our screen is 600px wide:
200px are left
600px are on screen
200px are right
You can scroll to the right, but the pixels on the left are unreachable...
How can i solve this to control, how much of my site gets dragged to the left in case of smaller screens?
This is especially important for mobile phones...
If you are worried about different screen sizes then I highly suggest using Media Queries but this is also a useful way of setting up centered elements. Just use a % width instead of a set width and followed by margin: 0 auto;
Look at fiddle for visual aid. (If this answer does not suit your needs at all then I'll gladly remove it)
div {
margin: 0 auto;
width: 80%;
height: 500px;
background: mediumSeaGreen;
}
JSFIDDLE
Your best bet (Ignore the CSS it's from my portfolio.
.subMenu {
display: none;
float: none;
width: 100%;
background: rgba(254, 126, 1, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
font-size: 20px;
padding-left: 60%;
position: relative;
left: 0;
top: 3.85em;
list-style-type: none;
padding: 1.5em 0;
margin: 0;
overflow: hidden;
}
#media only screen and (max-width: 680px) {
.subMenu {
top: 4.9em;
font-size: 10px;
min-height: 100% !important;
padding: 0;
background: rgba(0, 0, 0, 0.5);
}
}
You can also use jQuery to dynamically find the width.
var width = $('div').width();
$('div').text(width);
You could try using margin: auto
http://jsfiddle.net/56N9w/
As you see there if you make the window too small for the content to fit it will left align by default
Use this:
margin: 0 auto;
width: 400px;
alternative:
margin: 0 auto;
width: 50%;
another alternative:
#outer-div {
margin: 0 auto;
width: 50%;
}
#inner div {
/* insert any CSS you want here */
}
NOTE 1: When using margin: 0 auto, you need to define the width otherwise it won't center.
NOTE 2: You should really put it inside another box, or make the page width 100% (or a width larger than the box).
NOTE 3: You can't center vertically with margin: auto auto. This simply won't work. See below for the solution to this:
Centered box both horizontally and vertically:
Working in jsbin:
http://jsbin.com/OSUViFi/1/
The code (same as the jsbin above):
page.html
<div id="outer-container">
<div id="inner-container">
<div id="centered-box">
</div>
</div>
</div>
style.css
#outer-container {
width: 100%;
height: 100%;
display: table;
position:absolute;
overflow: hidden;
}
#inner-container {
display: table-cell;
vertical-align: middle;
}
#centered-box {
margin: 0 auto;
height: 400px;
width: 400px;
background: #000;
}
Specific for your needs (not including vertical alignment which it looks like you don't need):
jsbin example:
http://jsbin.com/axEZOTo/2
The code (same as the jsbin above):
page.html
<div id="container">
<div id="centered-box">
</div>
</div>
style.css
#container {
width: 1000px;
margin: 0 auto;
height: 100%;
background: #999;
}
#centered-box {
max-width: 70%;
min-width: 200px;
height: 500px;
margin: 0 auto;
background: #000;
}
Here, the smallest it can go is 200px, this number you can change to the smallest amount that you want to allow your box to have.
NOTE:
I finally figured out what you were trying to say in your question, which was poorly worded.
You only used 600px as an example, but you really just want to have it be a fluid layout that changes with screen size.
I'm having some trouble with a responsive design. The first that I have tried to create.
For some reason when I view the site on my iphone everything is zoomed in.
What I want is; On the desktop site, the logo will sit left in the '.container' and when viewed on an iPhone the image will sit directly in the middle.
Here is the URL: http://markpetherbridge.co.uk/peak.
I have added this into the html header:
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
this is the relevant CSS:
<div class="wrapper">
<div class="container" id="header">
<div id="peak-logo">
<img src="img/peak-logo.png" alt="Peak Architects" />
</div>
</div>
</div><!-- end.Header !-->
My desktop CSS is:
/* structure */
body {
font-family: "Calibri", Helvetica, Arial, Sans-Serif;
font-size: 16px;
color: #8d8c8c;
}
.wrapper {
float: left;
top: 0px;
left: 0px;
width: 100%;
background-color: #333;
}
.container {
position: relative;
width: 1000px;
height: 100px;
background-color: #ccc;
margin: 0 auto;
}
and the CSS for the phone is:
#media screen and (max-width: 480px) {
body {
}
.wrapper {
max-width: 480px;
}
.container {
width: 100%;
max-width: 480px;
}
#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 200px;
min-width: 480px;
margin: 20px 0;
}
}
It seems to work in the browser just not when viewed on an actual phone device.
This will work when #media screen takes effect.
http://jsfiddle.net/Enxu2/1/
You have a few issues because of your minimum width being set to specific pixels. For a mobile atmosphere you need to use a % so it can adapt to the viewport. Once you set something to width: 100% you need to be conscious of your left/right margins and padding as it can move elements outside of where they should be and allow the user to zoom in and out on your page instead of it fitting perfectly. An easy way to fix this if you are having some elements outside of your defined borders you can try changing some width:100% to width: 95% or even 90%. This should allow you to see which elements are causing the problem.
In the jsfiddle provided I changed some widths and some margins. I hope this will help you get on the right track!
#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 100%;
min-width: 100%;
}
.wrapper {
width: 100%;
}
.container {
width: 100%;
}
.container img {
width: 100%
}
You also need to make sure your image will be responsive, so you need to set it to a % width also. if you have a max width/height for the image you can always define it in the css using max-width: or max-height: but keep in mind your viewports.
I hope this helps!