I have a problem with resizing the header image so that it fits the heading size. Both the image and the heading are in the same div but I can't seem to find the solution. I had one where it looked good on the laptop, but on a smartphone, where the screen is smaller, the image was way smaller than the heading.
I tried with several height units: %, em, rem and vh, but nothing seemed to work correctly. I also tried to have a fixed div height and using object-fit with contain or size-down + max height of the image as 100%, but that also didn't work. Additionally, I am not sure about giving the div a fixed height - won't it look out of scale when viewing on various devices?
What I need is to have the home icon on the left at the same level as the heading + both having the same height, no matter what device and screen size I'm on. The heading should stay centered. Does anyone have any idea what I'm doing wrong? Below the html and css - one of many versions I checked.
Apologies if the code isn't very clean, it's only my second project.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Photo Gallery</title>
<link rel="stylesheet" href="gallery-styles.css" />
</head>
<body>
<div id="top-row">
<a href="index.html">
<img
id="home-icon"
src="data:image/png;base64,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"
/></a>
<h1 id="header">Luna's photos</h1>
</div>
<div id="gallery">
<img src="Luna00.jpeg" />
<img src="Luna01.jpeg" />
<img src="Luna02.jpeg" />
<img src="Luna03.jpeg" />
<img src="Luna04.jpeg" />
<img src="Luna05.jpeg" />
<img src="Luna06.jpeg" />
<img src="Luna07.jpeg" />
<img src="Luna08.jpeg" />
<img src="Luna09.jpeg" />
<img src="Luna10.jpeg" />
<img src="Luna11.jpeg" />
<img src="Luna12.jpeg" />
<img src="Luna13.jpeg" />
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Verdana, sans-serif;
background: black;
}
/* for header size visibility - remove later */
#top-row {
border: 1px solid white;
}
#home-icon {
position: absolute;
margin-left: 20px;
margin-bottom: 0;
display: block;
max-height: 100%;
}
#header {
background: black;
color: white;
display: block;
text-align: center;
}
#gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0 4px;
}
#gallery img {
width: 25%;
height: 300px;
object-fit: cover;
margin-top: 8px;
padding: 0 4px;
border-radius: 10px;
}
#media (max-width: 800px) {
#gallery img {
width: 50%;
}
}
a {
color: darkgrey;
}
a:hover {
color: black;
background: darkgrey;
}
I think JithinAji answer is a good solution.
You also asked for
icon on the left at the same level as the heading + both having the same heigh
so if you prefer you can modify his code with
#top-row {
border: 1px solid white;
display: flex;
align-items: center;
justify-content:center;
}
#home-icon {
margin-bottom: 0;
display: block;
height: 2rem;
}
#header {
background: black;
color: white;
display: block;
text-align: center;
font-size: 2rem;
margin-left: 20px;
}
Anyway if you have problem with really narrow smartphone display you can add a #media to reduce the #home-incon height and #header font-size like
for example:
#media (max-width: 320px) {
#home-icon {
height: 1.5rem;
}
#header {
font-size: 1.5rem;
}
}
Can you check if this is what you are looking for.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Photo Gallery</title>
<link rel="stylesheet" href="gallery-styles.css" />
</head>
<body>
<div id="top-row">
<a href="index.html">
<img
id="home-icon"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAhFBMVEX///8AAACampqgoKBOTk7p6ekpKSn8/Pz29va4uLhcXFzh4eH5+fkxMTEPDw/z8/NEREQ3NzcgICDl5eW/v788PDzX19dra2vHx8dJSUnt7e2oqKg1NTWEhIR9fX2xsbGRkZEVFRWKiookJCTR0dGAgICUlJR0dHRoaGhiYmJWVlYLCwtDLsDCAAAH+klEQVR4nO2d6WKyOhCGcV9QUVHc6kLlq229//s7Wm3BmSQMYQuceX+2LHkwzJaQWI26yyq7AbmLCasvJqy+mLD6YsLqq2jC4f7UbH0VecciCSd7z3pocZYedO4m1VV91wIJPxzrT/295KC9lVjuWHnbwggP29d2BTPRUf+SA1pWx1fduCDCoY0b1sSHzXUALctT3boQwuVa2DD3Gx7Y1iPcqm5eAOF115M17QisxJceYUd1+/wJL46ibc7ny7GrChK2vZjWrbuVJpwf45s3eq8w4V7VQUN5fxanYoTTuA4a6lhFQkoHDdU/VI7w3za+YS8K2rezLpUhnAYa7Tz6OlFpOYQ7vYaOdoLYzkTCS9IOmlrFEkpi0PoQfkhj0HoQDt0S+AokPA9K4SuOEGbxdSN803GBFSK8NqmNOeXwSxdA+EV11bt5Hm9r7oQTapBtP9KkzC1u3oTKMkVE/dPfKa1svWa+hOQYZhEt3GqF5uUQnvrERlzAie/EX75kwg01jd/56NzxwnxCn5oleW3h+Z8dwwlXxAY6J9kVfHmt2ADCLtWtrd8UV4ktp5ZHSCwUWp1VzIWopqpgQqqx7+3Q8CUajXlLnzJnT9gc0e7sIZzvwFpP4R9TJyVZE7aJQWi0XP/UT3g3asE/nxPVVvMmJLuIRReeevh9dzuf8F+iEdSSCKkuwkUWZhg1m4sl+O+V2vNzJqS6iB6KYbqgI/Y/4LU3+qFqdoRUk4BjGEEUag/hQVQPlBvhjGjWHTST5Fvs1wfwTdVNjjMipCYDAxjDjKWWEj+LlZbFyYSQ6uNdZCaVT8bbgKP9VkmETVqI3GvBGCbWDezm4AxyRpYlIdVbBfAXeSO8WNsDvF3i5Dgt4Zzo47cohjnRmrpGDyZhcpySkOrjB3AC3TfZauA4LtkIXSpC6uO04ZxRSgeNtBGFQElGWdMQEl+JfnMCTiR20FAojhvSLY4+ITUDRwnRl0bq7sDX+Hqihqq6hNQsYgsLhbqhiQfjOGotVpOQGITiIPtdvy5xhHHchWbmjiirjidsEx8feu46HTTUFsZxc1o5bnSU1rvEhP6O9gr04buTNlu/RQ3w55CE7VDOTjI7XkhITWMW0AVmUarvtXx4VVq37zfhiTJCaj+zoQ8jPu1YudB0zYhOufMOnZaIcEq82qgFrnY+Zjdkhpwj0eLgp44JW0QfhILsbGdCoZEAanBsreHDeSWkjpUgF5iiyCIRKnKQsyqQwUUJyXWmIzBbE+ovn0S9I7Rj1EjwNUaOEK6odSZYydYrPcQLZY4zcqlPSEj0ZMgFZjjSiYTe9i/iJAc79Kq/hBvi74DqYyliNIKwcyRWjsMhhSfhhXaeDetMCVIcTdm6Ru13dvyD8IN0Tg9mgZOMxnDVQgMgB5rFCa4hIa2ChwZzi5oMjF59n2Yz7PMvIWlOGgqlipwMjMw37e2w5w/CA+FYnAUmLlOkkmYW6v0QvhGMDEppsplhkESomE7yUoM7YfyBKEYjB4mZCuVqlEL1qmHN48xhD9XdV+XM5sYFAIJz9BrWd8whKKwobTb3vTEwcZjGmruxpf4QB3XQEmdz3zVCQ8dx6dCnpXIVeDoMdZQ0P6HSV0xXbaoIA8pgdeHCjkPpmXfyXuqgDroscTp+VHgUVjF61LQkn8C/pFgPncr44EesATTvjQ9ZVx1a4mUM8NSs7OsUaYQtoGSQbDSxGoLoBE/3abznUKdIJbw8ijBWbd5iGvQi9pBFLvWDGJkcNDou8GTrn8gbRCgLH525N+0HfEgwNxd4jnsWfCOcRl1AgCZM5lqISSfnH25spC79+JXv+WE4nOIJ1jeiluBK0RpNgGwsn1HlqPUwuI8qhn9YeK63E43ClZJG0NXHb2Oj27K9wZ+xjRnHXxaeByYWSqqA1IQrA6K0WOEpR3RCWgmufAnMP4nwaqwNReqgKI5COMtpNCIPOdikEgh1pkGWJSZkQvPFhExovpiQCc2Xo8gv6kHYFy73yoRMaJKYkAnNFxMyofliQiY0X0zIhOaLCZnQfDEhE5qv+hOO4Nzh2hH2NL5WZ0KzxIRMKFbH/pXbAXI721BOqNFdirnUo/7toJ+TOs9rujaQ+7y+8zLNMhfCXjiRf4Lkz/90Hoda3jST7yWzX85uB53vZ/nPC+Fm/fx53h0vN5EG5vMbitcGjpf0Ix1VM0Vq90inFk84lF3QUS3HK9C0coRbxUCuSNPwVTSLUNpLt4rpdyItTSWU7uKo3mwTq3qEbsILVY/QTnihWe0Jx+G3zkwoFhMyoUxMSJaxhJusCLvh5y41JTyHn5zVlLC7JTWGCZkwuZiQLCZ8igmzJ1wyIVVM+BQTMmFyMSFZkeyppoSRDJgJxcqLcCxb7IYJ0YWY8CEmNJgwuvBqPQmXlSPsoF1Z1TKWsCtbADjFGLBZhHPZykxJx/Gn1SOUbBQjU2S2SUUIVdNgRdpUjtBCy5IqdT3QGmMS4TYI1uv14q6BQrd/3w4L3OgUQLwWopGEKYQWF2ZCJkxDOMljLU0mZEImZML/GeGVuLdbdQnh6tpMyIRMyIQ5EOaxPjETMiETMiET1o0wjw0lmLBYwjy2bjOLMI9NJcwizGPnGi3CuIZoE+ax84lgj6N4wo16G6sg4XhmKPmSA9rytPYoabRViEHCQfeoMi/UuL7ibqqddJZNqfDWbAm0ackvrKOW8mnH7PdUAzFh9cWE1RcTVl9MWH3Vn/A/ffrIdwEnvgkAAAAASUVORK5CYII="
/></a>
<h1 id="header">Luna's photos</h1>
</div>
<div id="gallery">
<img src="Luna00.jpeg" />
<img src="Luna01.jpeg" />
<img src="Luna02.jpeg" />
<img src="Luna03.jpeg" />
<img src="Luna04.jpeg" />
<img src="Luna05.jpeg" />
<img src="Luna06.jpeg" />
<img src="Luna07.jpeg" />
<img src="Luna08.jpeg" />
<img src="Luna09.jpeg" />
<img src="Luna10.jpeg" />
<img src="Luna11.jpeg" />
<img src="Luna12.jpeg" />
<img src="Luna13.jpeg" />
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Verdana, sans-serif;
background: black;
}
/* for header size visibility - remove later */
#top-row {
border: 1px solid white;
display: flex;
align-items: center;
justify-content: flex-start;
}
#home-icon {
/* position: absolute; */
margin-left: 20px;
margin-bottom: 0;
display: block;
height: 4rem;
}
#header {
background: black;
color: white;
display: block;
text-align: center;
font-size: 2rem;
margin-left: 20px;
}
#gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0 4px;
}
#gallery img {
width: 25%;
height: 300px;
object-fit: cover;
margin-top: 8px;
padding: 0 4px;
border-radius: 10px;
}
#media (max-width: 800px) {
#gallery img {
width: 50%;
}
}
a {
color: darkgrey;
}
a:hover {
color: black;
background: darkgrey;
}
You can solve your problem with these changes:
#top-row {
border: 1px solid white;
display: flex;
align-items: center;
justify-content: center;
}
#home-icon {
margin-left: 20px;
margin-bottom: 0;
display: block;
height: 40px;
}
#header {
background: black;
color: white;
display: block;
text-align: center;
margin-left: 20px;
}
Related
I have a header with a video background that looks good on a desktop but on a mobile it is pushed to the left side instead of full width.
I tried everything I can think of, but it is still not working as I would like.
It's about 2/3rds of the mobile view width starting on the left.
Interestingly, if I remove all the images, the header then works and spreads across to fill the full width as I want.
Any ideas?
Here is my code:
.header {
width: 100%;
height: 200px;
display: block;
overflow: hidden;
margin-bottom: 50px;
}
/* This h1 is in case video doesn't work */
.header h1 {
margin-top: 30px;
color: #3F4EFF;
}
.example_container {
display: flex;
padding-left: 0px;
padding-top: 20px;
margin: ;
justify-content: ;
width: 100%;
}
.exampletext-container {
display: flex;
padding-left: 30px;
margin: auto;
width: 700px;
}
.exampletext-container pre {
font-size: 20px;
padding-top: 20px;
color: black;
font-family: Montserrat;
white-space: pre-wrap;
word-wrap: break-word;
}
.exampletext-container img {
padding-top: 20px;
padding-left: 00px;
padding-bottom: 30px;
height: 250px;
width: 600px;
margin: auto;
}
.footer {
background-color: pink;
width: 100%;
height: 125px;
display: block;
}
.footer p {
font-family: Montserrat;
font-size: 10px;
color: white;
text-align: center;
padding-top: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:400,800"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="css/styletest.css" />
<title>example</title>
</head>
<body style="background-color: #90ee903b">
<div class="header">
<div class="video6">
<video
autoplay
muted
defaultMuted
playsinline
src="images/touchblue4.mp4"
></video>
</div>
</div>
<main>
<div class="example_container">
<div class="exampletext-container">
<pre>
couple of paragraphs
<img src="images/example.png">
couple of paragraphs
<img src="images/example.png">
couple of paragraphs
<img src="images/example.png">
couple of paragraphs
<img src="images/example.png">
</pre>
</div>
</div>
<div class="footer">
<p>A paragraph.</p>
</div>
</main>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.exampletext-container {
display: flex;
margin: auto;
}
.video6{
justify-content: center;
display: flex;
}
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.
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, media queries 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><h3>megan's website</h3></li>
<li> About</li>
<li> Contact</li>
<li> Info</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: 280px;
height: auto;
border-radius: 50%;
}
.header-content {
color: white;
padding: 10px;
font-size: 1.5vw;
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: 95vh;
}
.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;
}
#media only screen and (max-width: 950px) {
.img {
width: 100%;
max-width: 200px;
height: auto;
}
}
#media only screen and (max-width: 750px) {
.img {
width: 100%;
max-width: 170px;
height: auto;
padding-right: 10px;
}
.header-content {
font-size: 1.6vw;
}
}
#media only screen and (max-width: 600px) {
.img {
width: 100%;
max-width: 150px;
height: auto;
padding-right: 20px;
}
.header-content {
font-size: 1.8vw;
}
}
#media only screen and (max-width: 460px) {
.img {
width: 100%;
max-width: 200px;
height: auto;
padding-right: 20px;
}
.header-content {
font-size: 2.2vw;
}
}
#media only screen and (max-width: 400px) {
.img {
width: 100%;
max-width: 300px;
height: auto;
}
.header-content {
font-size: 2.5vw;
}
}
#media only screen and (max-width: 320px) {
.img {
width: 100%;
max-width: 100vw;
height: auto;
}
.header-content {
font-size: 3vw;
}
}
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 :)
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.
How do I center an image in a circle around it? The circle should then lie behind the picture and only frame it.
HTML
<div>
<div class="circle"></div>
<img src="../../assets/img/img.png" alt="" class="showslide">
</div>
CSS
.circle {
margin-top: 5%;
padding-top: 5%;
border: 4px solid #fff;
border-radius: 50%;
z-index: -1;
}
.showslide {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
}
Do you need to keep the circle div as a sibling of the image?
Because if you put the image inside the circle div, your code it´s already working:
.circle {
margin-top: 5%;
padding-top: 5%;
border: 4px solid #000;
border-radius: 50%;
}
.showslide {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="circle">
<img src="https://cdn.iconscout.com/icon/free/png-512/account-avatar-profile-human-man-user-30448.png" alt="" class="showslide">
</div>
I've removed the z-index (not needed in this case) and changed the border color to black.
Not quite sure what you are trying to accomplish here but as far as I understood, ur trying to make the frame unclickable. First of all, you can't keep the frame behind the picture because then the image gets in front of it and keeps it hidden.
pointer-events: none;
Set this for the frame and it should be good.
How do I center an image in a circle around it?
One approach would be to apply two CSS properties to the <img>:
a border
an outline
Working Example:
.my-image {
width: 144px;
height: 144px;
border: 18px solid rgb(255, 255, 255);
border-radius: 50%;
outline: 1px solid rgb(191, 191, 191);
}
<img class="my-image" src="https://picsum.photos/132/132" alt="My Picture">
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Montserrat", sans-serif;
color: #262e2e;
box-sizing: border-box;
margin: 0;
background: #f5f8fa;
padding: 40px 0px;
}
.image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #dddddd;
}
<h4>Center Image</h4>
<div class="image-container">
<img
src="https://image.shutterstock.com/image-photo/kiev-ukraine-march-31-2015-260nw-275940803.jpg"
width="100"
/>
</div>
<!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>Document</title>
</head>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Montserrat", sans-serif;
color: #262e2e;
box-sizing: border-box;
margin: 0;
background: #f5f8fa;
padding: 40px 0px;
}
.image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #dddddd;
}
</style>
<body>
<h4>Center Image</h4>
<div class="image-container">
<img class="image-container"
src="i.jpg"
width="100"
/>
</div>
<input type="file" >
</body>
</html>
I am working on a side project of mine where I have an HTML and CSS file. I started working on it from a mobile-first approach and things were looking good. But then I needed to make it a responsive design and added the following tag the CSS broke and did not work properly.
<meta name="viewport" content="width=device-width, initial-scale=1">
:root {
--black: #191414;
--green: #1DB954;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap') * {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
background-color: #181818;
}
.container {
display: grid;
grid-template-rows: min-content 8fr 1fr;
background-color: #181818;
width: 100vw;
height: 100vh;
}
.main {
display: grid;
grid-template-columns: min-content 1fr;
}
.music-img {
width: 300px;
height: 300px;
object-fit: cover;
margin: 50px 50px;
}
.music-details {
display: flex;
flex-direction: column;
}
.music-name {
font-family: 'Roboto', sans-serif;
font-size: 35px;
color: #ffffff;
margin-top: 50px;
}
.album-name {
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #8e8e8e;
margin-top: 10px;
}
#play,
#forward,
#backward,
#share,
#heart {
width: 32px;
height: 32px;
margin: 20px 15px;
}
.list {
overflow: auto;
display: flex;
flex-direction: column;
-ms-overflow-style: none;
scrollbar-width: none;
/* Firefox */
}
.list::-webkit-scrollbar {
display: none;
}
.footer {
background-color: var(--black);
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: center;
}
.song-name {
font-family: 'Roboto', sans-serif;
font-size: 10px;
color: #ffffff;
}
.song-band {
font-family: 'Roboto', sans-serif;
font-size: 8px;
color: #8e8e8e;
}
.song-detail {
margin: 10px 50px;
}
#test {
color: #ffffff;
width: 100px;
height: 100px;
}
#home,
#search,
#library {
width: auto;
height: calc(100vh*0.05);
margin: 30px auto;
}
.song-detail:last-child {
margin-bottom: 25px;
}
#media screen and (min-width: 768px) {
.footer {
background-color: red;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Spotify</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="main">
<div class="img">
<img src="assets/album.jpg" class="music-img"></img>
</div>
<div class=music-details>
<div class="music-name">
Justice Beaver
</div>
<div class="album-name">
The Office
</div>
<div class="play-items">
<span><img src="assets/backward.png" id="backward"></img></span>
<span><img src="assets/play.png" id="play"></img></span>
<span><img src="assets/forward.png" id="forward"></img></span>
<br>
<span><img src="assets/heart.png" id="heart"></img></span>
<span><img src="assets/share.png" id="share"></img></span>
</div>
</div>
</div>
<div class="list">
<div class="song-detail">
<div class="song-name">Celebration</div>
<div class="song-band">KOOL & THE GANG</div>
</div>
</div>
<div class="footer">
<span><img src="assets/home.png" id="home"></img></span>
<span><img src="assets/search.png" id="search"></img></span>
<span><img src="assets/library.png" id="library"></img></span>
</div>
</div>
</body>
</html>
Here is the image before adding the above tag
And here is the image after I added the above tag
I and not sue what is wrong here. Any help would be appreciable.
Thanks
You have some issues in that code. First, you didn´t made the cassette img responsive, because you gave him a px size, then the img can´t resize, it´s static. If you want to make an img responsive, you have to use relative sizes, like "%" or "vw". Then you have to do the same with the icons, or at least add a media query for smaller devices and give them smaller sizes in px.
Same thing applies to the font size, it´s better to work with "em" or "rem", because they are relative sizes.
Then, i don´t know why you added this code
#media screen and (min-width: 768px) {
.footer {
background-color: red;
}
}
Because of the media query, this code only adds red color on devices that are bigger than 768, so tablets and cellphones won't apply
You should use it the simple way
.footer {
background-color: red;
}
I think that´s a good start point to start making it responsive.
You can start by trying to make these changes.
.music-img {
width: 15vw;
height: 15vh;
object-fit: cover;
margin: 50px 50px;
}
.music-name {
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #ffffff;
margin-top: 50px;
}
.album-name {
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
color: #8e8e8e;
margin-top: 10px;
}
#play,
#forward,
#backward,
#share,
#heart {
width: 25px;
height: 25px;
margin: 20px 15px;
}
.footer {
background-color: red;
}
Then I think you would figure it out the rest.
My first time posting and am looking for some help. I am currently taking an assessment and am stumped on the last part. I am making a picture card with an image above and a circle image to the side as well as some text next to the circle image and below this is what it looks like: https://i.gyazo.com/547948a01bd8f045e6a1b90bd79e113a.png
this is how it needs to look:
https://i.gyazo.com/9426e3f060cdd540581f12da474fc8ca.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
#media screen and (min-width: 600px) {
form {
display: grid;
position: relative;
width: 600px;
margin: 0 auto;
}
}
#media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
Any help would be awesome! Thank you!
Check out the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<div class="container1">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="container2">
<div><h4>Title goes here</h4></div>
<div><p>Secondary text</p></div>
</div>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
Here we used 2 containers, one for row and one for column elements. You can achieve this easily and more effectively with HTML tables.
Next here is the css:
#media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
border-radius: 25px;
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
height: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
.container1{
height: 40px;
display: flex;
flex-flow: row nowrap;
}
.container2{
display: flex;
flex-flow: column nowrap;
}
/* ************These styles are junk************ */
/* *********Better to use classes n ids********* */
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
/* ************These styles are junk************ */
Here I added border-radius property to the card to make its corner round. Use border-top-left-radius, border-top-right-radius with image to make its top borders round which gives card a neat look. It is important to give height n width to image, thus I added height property to avatar pic. Lastly, both container classes are set to contain rows and column without wrapping respectively, using flex-flow property. Hope it will help you. Peace.
Add a float property to the .avatar_img class
.avatar_img {
float: left;
}
Wrap title__text and secondary__text inside div,
and then wrap avatar__img and title inside flexbox div.
<div class="card-info">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="card-info-title">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
</div>
</div>
.card-info {
display: flex;
align-items: center;
}
.secondary__text > p {
margin-bottom: 0;
}
Here's CodePen link https://codepen.io/azhkuro/pen/WNrXxpd. Hope it helps you