Surprisingly (at least to me), when I use the ipad emulator in Chrome, I see a very different layout than when I launch my iPad webapp:
- in chrome : screenshot of chrome version
- on my ipad : screnshot of ipad version
The background resolution is 2732x2048.
images and fonts absolutely don't have the same size
the bottom selectors, which are absoluted position with bottom:0 won't end up at the same location
a few background lines are missing on the bottom part of the ipad version
the page html is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="user-scalable=no, width=device-width">
<style>
body {position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background-image: url('images/rl-background-grid.jpg');
background-repeat: no-repeat;
background-size: cover;}
.navigation {bottom: 0px;
height: 100px;
position: absolute;
width: 100%;
box-sizing: border-box;
font-size: 18px;
color: #000000;}
</style>
</head>
<body>
<div class="navigation">
This is a test
</div>
</body>
</html>
You can find the actual page here :
http://rl.manuelracim.com/test/test.html
Am I missing something obvious in my header? Or is it a problem that all my CSS rules are expressed in px?
Any pointer/help appreciated!
Thanks
Related
I would like to convert a rectangular image to a square image, but without losing information about the original image. My idea was to create a square image, then I would blur it and I would overlay the rectangular image on it, so something similar:
All this should use HTML+CSS only. To do this, I use Photoshop right now but a way to replicate this behavior using CSS would be amazing because it would save me a lot of time.
I don't have any idea how to do that because the main problem is that the rectangular image should have the same height (or width, if width > height) as the square blurred image and it should be responsive (so no fixed size, it depends on the size of the original image).
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Image Box</h1>
<div class="image-box"></div>
</body>
</html>
CSS
/* style.css */
.image-box {
padding-bottom: 100%;
position: relative;
background-image: url(image.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.image-box::before,
.image-box::after {
width: 100%;
height: 100%;
content: "";
position: absolute;
}
.image-box::before {
backdrop-filter: blur(10px) brightness(0.8);
}
.image-box::after {
background-image: inherit;
background-size: contain;
background-position: inherit;
background-repeat: inherit;
}
I created a simple example to showcase the idea of having an absolutely positioned element with left and right set to 0 but with very different results in latest Chrome and Safari.
Based on the comments to this question and this answer, I would think it would work consistently based on how it's outlined in the CSS spec, but it doesn't. Why is this the case?
I'm aware that setting a specific width will resolve, but 1) why the difference cross-browser, and 2) is there a better way to center than specifying explicit width?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.vis {
width: 100%;
position: relative;
}
.btn {
position: absolute;
left: 0;
right: 0;
margin:auto;
display:block;
}
</style>
<title>Document</title>
</head>
<body>
<div class="vis">
<button class="btn">Test!</button>
</div>
</body>
</html>
Safari:
Chrome:
Problem
I am having an issue with getting the height of a responsive content box to fill the screen vertically. everything including widths adjust fine to resizing in Dev Tools however when I adjust the content box height in the CSS code, I am only able to enter static heights in px (483 in code below). When I try to set the height to 100%, my google map which is in the content box, disappears. The map resizes fine as I manually adjust the content box contenta height so that seems to be functioning properly. I have the meta tag as
<meta content="width=device-width, height=device-height, initial-scale=1.0" charset="utf-8">
Searching other questions hasn't resulted in any solutions.
Question
Is there coding that I am missing that allows the responsive content box to fill vertically?
working test page
CSS
body {
font-family: Arial, Helvetica, sans-serif;
width: 99%;
height:100%;
background-color: #52669c;
}
#map {
width:100%;
height:100%;
border-radius: 15px;
}
#contenta {
float: left;
background: #0099ff;
width: 95%;
height: 483px;
}
#rightcolumn {
background: #FFFFFF;
width: 2%;
float: left;
}
Use this template in your html for full width and full height
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://saltwx.com/css/responsive.css">
<title>My website</title>
<!--
rest of your <head>
-->
</head>
<body>
<div class="page-wrapper">
<!--
rest of your <body>
-->
</div>
</body>
</html>
with this css
html, body, .page-wrapper {
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.page-wrapper {
min-height: 100%;
}
I thought I had CSS floats figured out but apparently I don't because I can't figure out why this page is behaving the way it is. I'd like for the photo and status divs to each take up 50% of the screen such that both of them appear on the same line and that line takes up 100% of the screen. But what is happening is that the "Stats" div renders below the "Photos" div. The only way I can get them to render on the same line is to reduce their respective widths to 49% (or lower) but then there's a slight gap between the right edge of "Stats" and the edge of the screen. There's something that's taking up additional room but I don't know what it is and I don't see anything in Chrome's Dev Tools. By the way, reset.css is just Meyer's reset.
Thanks.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../../reset.css" />
<link rel="stylesheet" href="base.css" />
</head>
<body>
<div class="content-main">
<div class="photos">Photos</div>
<div class="stats">Stats</div>
</div>
</body>
</html>
base.css
.content-main {
width: 100%;
}
.photos {
float: left;
width: 50%;
background: #cf6;
}
.stats {
float: left;
width: 50%;
background: #bbb;
}
I found my error. If add additional padding to each of the elements, that creates the problem. I left that out of my question so that code shown above will work. My bad.
I had this working in IE9, but then messed it up trying to figure it out in IE8 and 7. I've searched around here and other places, but can not find the correct solution to my problem.
I'm trying to scale an image down in a div whenever the browser window is resized smaller than its max-width (fluid image). I'm assuming the problem is that I'm using a CSS3 property (background-size: 100%;) which is not supported in older browsers. How can I make this compatible to IE9, 8, 7?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fluid Image</title>
<style type="text/css">
img {
max-width: 90%;
height: auto;
}
.imageContainer {
width: 900px;
max-width: 90%;
margin: 0 auto;
background-image: url(img/fluidImage.jpg);
background-position: 0 -450px;
background-repeat: no-repeat;
background-size: 100%;
height: 650px;
}
</style>
</head>
<body>
<div class="imageContainer"></div>
</body>
</html>
There's a filter you can use for this:
http://www.pziecina.com/design/turorial_demos/resize_background.php
For pre IE8 use -
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg',sizingMethod='scale');
For IE8 use:
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg',sizingMethod='scale')";
Using the sizingMethod= 'scale' means that even IE will scale the background image to the size of the browser window.