I am trying to make a responsive personal website using CSS GRID but I am stuck in a point where my image is not resizing correctly. I tried a lot of options, including object-fit, image max width etc but I couldn't find any solution. I will leave here my code and the images of how my website is supposed to look in both mobile and desktop view. Any help will be much appreciated. Thank you very much!
How it looks on mobile vs. How is it supposed to look on mobile
How it looks on desktop vs. How is it supposed to look on desktop
function openSideMenu() {
document.getElementById("navOpen").style.width = "200px";
document.getElementById("nav").style.marginLeft = "200px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeSideMenu() {
document.getElementById("navOpen").style.width = "0";
document.getElementById("nav").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
* {
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
img{
grid-column: 2/3;
grid-row: 3/5;
max-width: 100%;
}
.navOpen{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: .7s;
}
.navOpen a{
display: block;
align-content: center;
padding: 20px 30px;
font-size: 18px;
text-decoration: none;
color:blanchedalmond;
}
.navOpen a:hover{
color: aqua;
transition: .4s;
}
.navOpen .close{
position: absolute;
top: 0;
right: 22px;
margin-left: 50px;
}
.social{
grid-column: 2/3;
grid-row: 1/2;
text-align: right;
font-size: 25px;
}
p{
text-align: left;
font-size: 25px;
}
.picture{
grid-column: 2/3;
grid-row: 4/5;
margin-bottom: 0;
}
.home{
display: grid;
grid-gap: 35px;
grid-template-columns: 0.3fr 2fr;
grid-template-rows: 10px 60px 30px auto;
}
.nav{
grid-column: 1/2;
grid-row: 1/4;
}
.name{
grid-column: 2/3;
grid-row: 2/3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Page</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style-grid.css" type="text/css" media="all">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="home">
<header class="social">
<a href="https://github.com/" target="_blank">
<i class="fab fa-github" style="color:black;"></i>
</a>
<a href="https://www.linkedin.com/" target="_blank">
<i class="fab fa-linkedin" style="color: black;"></i>
</a>
</header>
<aside class="nav">
<span class="slide">
<a class="w3-display-left" href="#" onclick="openSideMenu()">
<i class="fas fa-angle-right fa-3x" style="color:black;"></i>
</a>
</span>
<div id="navOpen" class="navOpen">
<a href="#" class="close" onclick="closeSideMenu()">
<i class="fas fa-times fa-lg" style="color:#806156;"></i>
</a>
<a href="#home">Home</a>
<a href="#work">Work</a>
<a href="#aboutme>">About me</a>
<a href="#contact">Contact</a>
</div>
</aside>
<p class="name">I'm <br>Jane Doe. </p>
<div class="picture" style="background-color: #590E0E">
</div>
<img class="img" src="https://cdn1.imggmi.com/uploads/2019/1/5/e49bacb43cec031976a6a2731bc861d8-full.png" alt="picture of myself">
<script src="js/javascript.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire