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
Related
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.
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 would like to have a image on the left with a heading on the right. I want both of them to scale in size and spacing as the page is shrunk. I have used this code: width: 10%; height: auto; margin: 2% 0px; to have the image on the top left of my page and scale in both spacing and size to the page when the browser is shrunk (I have also included media queries which wouldn't think would make a difference). I have tried using positioning: absolute which doesn't work. I am a novice to using HTML5 and CSS3. This is my first project and second post on Stack Overflow.
I think this is what you are trying to do
HTML
<div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>
CSS
div.wrapper {
width: 100%;
height: auto;
max-width: 600px;
border: thin solid #333;
}
div.wrapper:after {
content: '';
display: block;
clear: both;
}
div.wrapper img {
display: block;
float: left; width: 40%;
height: auto;
margin-right: 5%;
}
div.h1 {
display: inline-block;
line-height: 20px;
margin: 0px;
padding: 0px;
}
You can check it here
jsfidlle
Could you make a http://jsfiddle.net/?
It's kinda hard to understand what you're after based on our description alone.
I am trying to centre an image on my website - and it looks great when loading the page on a desktop computer, however on the mobile phone browser it appears like this
The css i am using to centre the image is as follows;
#logo
{
max-width: 60%;
min-width: 300px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto
}
<header>
<img src="images/500x245.png" id="logo"</img>
<h1>Welcome to AppCloud</h1>
</header>
Can anyone suggest some alternative approaches as my way seems to be failing. Thanks
Decrease the min-width it will work perfectly
#logo{
max-width: 60%;
min-width: 300px; /** <<--- changes to be done here **/
height: auto;
display: block;
margin-left: auto;
margin-right: auto
}
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!