I'm struggling to align images properly across different devices. It's more challenging than I anticipated.
Currently, on mobile in portrait mode, the image is not displaying as I want it to. Ideally, I want it to be closer to how it looks in landscape mode.
I've experimented with:
- object-fit: cover - object-fit: none
But I haven't had any success with these options. Should I wrap all the divs in a container first?
html {
background: url('https://cdn.glitch.com/87ed8b1a-63dd-4b25-a90a-376a6af4b751%2Fbackground3.png?1547124819891') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: sans-serif;
font-size: 16px;
}
/* ----- Structural Styles ----- */
.header {
overflow: auto;
}
#header p{
opacity: 255;
}
.hands {
height: auto;
width: auto;
position: absolute;
bottom: 0px;
right: 0px;
object-fit: none;
}
.container {
justify-content: center;
position: fixed;
bottom: 80px;
left: 38%;
right: 33%;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
<title>untitled</title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hands">
<img src="https://cdn.glitch.com/87ed8b1a-63dd-4b25-a90a-376a6af4b751%2FHands_paper3.png?1547124446277">
<div class="container">
<div class="header">
<a id="myBtn" style="float: right;font-size: 1.5em;">☰ </a>
</div>
<div id="story"></div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h1>Paused</h1>
<p>Put information about your game here</p>
</div>
</div>
</div>
<script src="modal.js"></script>
<script src="settings.js"></script>
<script src="ink.js"></script>
<script src="Brexit-Snatch.js"></script>
<script src="main.js"></script>
</div>
</body>
</html>