How do I make my image on my CSS page responsive?
Question
I have been trying all day to get my website to be responsive. Here is the link to it. https://mywebsite.techgurll.repl.co It does not look good on small screens. The image of myself I have on there keeps overflowing the container when the screens size gets smaller. Here is part of my CSS code
.img {
display: flex;
flex-direction: row;
height: 50vh;
margin-top: 20vh
}
If you would like to see the other code you can press inspect after you click my website link. I do not want to post it all here because it is a lot of code.
2 answers
solution1
0 2021-12-19 05:51:52
Technically your image is already responsive, because you are using vh units. However, vh stands for viewport height, which means that your image is responsive to how tall your viewport is.
If you want it to respond to width, you can use vw units. (Same concept as vh , just using width instead of height)
Another easy method for creating responsiveness is using CSS media queries.
@media (max-width: 600px){
body {
background-color: blue;
}
}
This will make the background color of the body change to blue when the viewport is 600px or less.
You can change any CSS properties inside of there (image size, etc...), but make sure that the media query comes after the normal css styling in your css file.
You can also look into CSS Grid Layout, but there is a bit more of a learning curve down that path.
Hopefully this helps to get you in the right direction.
solution2
0 2021-12-19 17:18:14
actually there were many problems in your css as well as in HTML so I wrote an improved version of your css and html and also made it responsive by using flexbox and units like vw and vh. copy paste the following code. 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" />
<link rel="stylesheet" href="style.css" />
<title>Landing Page</title>
</head>
<body>
<div>
<ul>
<li><a href="#"><h3>megan's website</h3></a></li>
<li><a href="#"> About</a></li>
<li><a href="#"> Contact</a></li>
<li><a href="#"> Info</a></li>
</ul>
</div>
<div id="header">
<div class="header-content">
<h1>Hi Everyone!<br />My name is Megan. Nice to meet you!</h1>
<p>
<strong
>I am an aspiring Software Developer. I am also a student and I
study Computer Science.<br />
I will be graduating in December of 2022 with my Bachelor's
degree.<br />I hope this website impresses the right employer.<br />
I am creating this website in the hopes to be noticed and land my
dream job.<br />
I am very driven and motivated to learn.This is my passion.<br />
I do not want this job because of money.<br />
I want this job because I want to work in something I enjoy doing
everyday.<br />
That to me is happiness.<br />
I feel it is important to practice every day in order to be the best
you can be.</strong
>
</p>
<button class="button">Sign Up</button>
</div>
<div class="div-img">
<img src="x4yT5As.jpg" class="img" alt="Picture of Megan" />
</div>
</div>
<div id="title"><h2>Projects I have worked on</h2></div>
<hr />
<div class="second-container">
<div class="info">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png"
alt="Python Logo"
height="100"
/>
<div class="text">
Compounding Interest using Loops<br /><a
href="https://github.com/megankeyes/Compounding-Interest-with-Loops"
style="text-decoration: none"
>Python Project</a
>
</div>
</div>
<div class="info">
<img
src="https://www.simplilearn.com/ice9/webinar_thum_image/CPP_Tutorial.jpg"
alt="C++ Image"
height="100"
/>
<div class="text">
Shopping List Program<br /><a
href="https://github.com/megankeyes/Shopping-List"
style="text-decoration: none"
>C++ Project</a
>
</div>
</div>
<div class="info">
<img
src="https://miro.medium.com/max/840/1*RJMxLdTHqVBSijKmOO5MAg.jpeg"
alt="Python Image"
height="100"
/>
<div class="text">
BMI Calculator<br /><a
href="https://github.com/megankeyes/BMI-Calculator"
style="text-decoration: none"
>Python Project</a
>
</div>
</div>
<div class="info">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/1200px-ISO_C%2B%2B_Logo.svg.png"
alt="C++ Logo"
height="100"
/>
<div class="text">
Dice Game<br /><a
href="https://github.com/megankeyes/Dice-Game"
style="text-decoration: none"
>C++ Project</a
>
</div>
</div>
</div>
<hr />
<div class="third-container">
<div class="quote">
<p>
<i>Your Future is Created by what you do Today<br />NOT Tomorrow</i>
</p>
<br />
<strong>-Robert Kyosaki</strong>
</div>
</div>
<div class="fourth-container">
<div class="box">
<div class="text-call">
<strong>Check out my GitHub for all of my projects!</strong>
<p></p>
<p>
Head on over to my GitHub by clicking that button right over there!
</p>
<button class="github-btn">
<a
class="call-to-action-button"
href="https://github.com/megankeyes"
>Megan's GitHub</a
>
</button>
</div>
</div>
</div>
<div class="footer">Copyright @ The Odin Project 2021</div>
</body>
</html>
and style.css:
* {
margin: 0px;
box-sizing: border-box;
}
#header {
display: flex;
align-items: center;
justify-content: space-around;
background-color: darkslategray;
width: 100%;
max-width: 100vw;
}
.img {
width: 100%;
max-width: 300px;
height: auto;
border-radius: 50%;
padding-right: 20px;
margin-top: 40px;
}
.header-content {
color: white;
padding: 10px;
font-size: 1.75vw;
font-family: Arial, Helvetica, sans-serif;
}
p {
margin-top: 30px;
}
button {
background-color: rgb(107, 192, 226);
outline: none;
border-radius: 10px;
padding: 5px;
border: none;
cursor: pointer;
margin: 10px 0px;
width: 20vw;
}
button:hover {
background-color: cornsilk;
}
h3 {
color: white;
}
ul {
display: flex;
justify-content: flex-end;
list-style: none;
font-weight: bold;
background-color: darkslategray;
color: white;
}
ul li {
padding: 10px 12px;
}
li a {
color: white;
text-decoration: none;
}
a:hover {
color: rgb(107, 192, 226);
}
#title {
text-align: center;
margin: 10px;
}
.second-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
width: 100%;
max-width: 100vw;
height: 70vh;
}
.info {
text-align: center;
}
.third-container {
background-color: rgb(219, 219, 219);
width: 100%;
max-width: 100vw;
height: 70vh;
font-size: xx-large;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.fourth-container {
width: 100%;
max-width: 100vw;
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100%;
max-width: 70vw;
height: 100%;
max-height: 60vh;
background-color: #3882f6;
border-radius: 10px;
padding: 60px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.github-btn {
margin-top: 20px;
color: rgb(107, 192, 226);
}
.github-btn a {
text-decoration: none;
color: white;
}
.github-btn a:hover {
color: rgb(107, 192, 226);
}
.footer {
display: flex;
justify-content: center;
align-items: center;
background-color: darkslategray;
color: white;
height: 10vh;
}
just read and try to understand what Improvements I made and also look how I made it resposive. I hope after reading this you'll get how to add responsiveness. and adjust it according to your taste like if you want to add more css like border etc.. enjoy:)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.