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
Related
I am trying to build a cards and stuck at one point.
I want to get the images go smaller relatively as the window size go smaller.
Objective: Pics size go smaller where I can see all 3 images till 600px while they remain at centre till 600px.
And I wrote a media query to get only one image below 600px but cant get the image go relatively smaller when I reduce window size.
Image container should should go smaller but I got stuck.
Any guidance would be helpful?
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.h1{
text-align: center;
position: relative;
}
.card-continer{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
/* .card{
width: 400px;
height: 380px;
position: relative;
} */
.card .card-image{
width: 400px;
height: 380px;
position: relative;
}
.card:nth-child(1) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
}
.card:nth-child(2) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
}
.card:nth-child(3) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
}
#media screen and (max-width: 600px) {
.h1{
text-align: center;
position: relative;
}
.card-continer{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
/* .card{
width: 400px;
height: 380px;
position: relative;
} */
.card .card-image{
width: 400px;
height: 380px;
position: relative;
}
.card:nth-child(1) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
position: relative;
}
.card:nth-child(2) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
display: none;
}
.card:nth-child(3) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
display: none;
}
}
<!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="main.css">
<title>trail2</title>
</head>
<body>
<div class="h1">
<h1>Responsive Cards</h1>
</div>
<div class="card-continer">
<div class="card">
<div class="card-image">
</div>
</div>
<div class="card">
<div class="card-image">
</div>
</div>
<div class="card">
<div class="card-image">
</div>
</div>
</div>
</body>
</html>
grid would be a better solution in this case. Because you use background images inside div, so you need to set a width and a height. It's not good for responsive.
But with grid you can use fraction to divide your container in 3 columns with the same size. And the fraction will be responsive depends on your screen size.
I made a example with your code
I have four divs on my page and each one of them has a link. The problem is, I want the links to be the same width and height as the boxes, but for some reason the links stretch more than they should, and as a result the whole container which contains the four divs is clickable.
I've tried setting the anchor tags to display:inline-block; but that didn't work.
How do I fix this?
Codepen
EDIT: Fixed it by wrapping the anchor tags in divs.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--nav-clr: #ebebeb;
--box-r: #f94144;
--box-g: #43AA8B;
--box-y: #F9C74F;
--box-b: #577590;
}
body,
html {
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
/* nav bar */
nav {
display: flex;
height: 60px;
background-color: var(--nav-clr);
align-items: center;
}
.logo {
width: 150px;
height: auto;
margin-left: 1em;
}
/* buttons */
.box-btn {
/* margin: 20px; */
width: auto;
height: 259px;
background: #43AA8B;
border-radius: 30px;
position: relative;
}
.box-btn::after {
content: '';
position: absolute;
display: inline-block;
/* margin: 20px; */
width: 100%;
bottom: 0;
rightt: 0;
height: 100px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
background: var(--nav-clr);
z-index: 1;
}
.content {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, 250px);
gap: 20px;
/* background-color: red; */
}
/* main */
.main-wrapper {
height: 100vh;
display: grid;
justify-content: center;
grid-template-columns: 80vw;
grid-template-rows: 25% 5% 65%;
/* gap: 20px; */
}
/* header */
.title-wrapper {
margin: 70px;
display: inline-block;
font-size: 1.3em;
text-align: center;
grid-row: 1/3;
}
/* SMALLER SCREENS */
#media screen and (max-width:700px) {
.title-wrapper {
font-size: 1em;
margin: auto;
}
nav {
justify-content: center;
}
}
#media screen and (max-width:626px) {
.content {
grid-template-columns: repeat(auto-fit, 350px);
}
.box-btn {
height: 350px;
}
.box-btn::after {
width: 100%;
height: 135px;
bottom: 0;
}
}
#media screen and (max-width:405px) {
.title-wrapper {
font-size: .8em;
}
}
<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>T3 Dashboard</title>
</head>
<body>
<div class="wrapper">
<nav>
<a href="http://t3-ks.com/">
<div class="logo-container">
<img src="/t3s.svg" alt="" class="logo">
</div>
</a>
</nav>
<main>
<div class="main-wrapper">
<div class="title-wrapper">
<h1>Menaxhimi i burimeve njerëzore</h1>
</div>
<div class="content">
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
</div>
</div>
</main>
</body>
</html>
I tried to change some css in the grey area. Is this what you want? If you want an element to be on the bottom, you can set bottom: 0; to its css when positioned absolute.
I would add to your most external container the css property pointer-events: none and to the internal one pointer-events:all. If what you want is not giving click feature to the external containers, this might solve the issue.
.content > a {
pointer-events: none;
}
.box-btn {
pointer-events: all;
}
I have finally achieved making a nav bar with text aligned left with small spaces between. I think using flex items is not the best way. Please show me how to align the nav bar with spaces between on the left
<link rel="stylesheet" href="styles.css" type="text/css">
<body>
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
</body>
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
justify-content: flex-start;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
.item1{
flex: 0.1;
}
.item2{
flex: 0.1;
}
.item3{
flex: 1;
}
I assume your navbar has links so the best semantic tag for the link is <a>.
If you put <a> instead of <p> you don't need to add flexbox styling as a is an inline element.
* {
margin: 0%;
padding: 0%;
}
.container {
border: solid black 1px;
background-color: aqua;
color: blue;
padding: 12px;
}
.container a {
text-decoration: none;
margin: 0 4px;
}
<nav class="container">
<a class="item1" href="page1">Events</a>
<a class="item2" href="page2">Results</a>
<a class="item3" href="page3">Partnering Restaurants</a>
</nav>
Is this what you are looking for?
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
justify-content: flex-start;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
nav p {
padding: 0 10px;
}
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
Since nav have links, use <a> instead of <p>. So you nav markup should be something similar to this:
<nav class="container">
<a class="item1" href="#">Events</a>
<a class="item2" href="#">Results</a>
<a class="item3" href="#">Partnering Restaurants</a>
</nav>
please clear your question
but here is solution i find
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
</body>
</html>
here is css
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
padding: 10px 2%;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
.container > *{
width: auto;
padding-right: 5%;
}
what i changes i maked
padding on top and bottom
no need of this
.item1{
flex: 0.1;
}
.item2{
flex: 0.1;
}
.item3{
flex: 1;
}
use this >*
here is the sample
I am building a personal website in html, with a thin left column, and a main content right column. When the web page shrinks, I want the thin left column to go above the main content. I cannot figure out how to do this, any help?
Here is what I have so far:
First I show my index.html file, then my .css file I use for styling. Thanks!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Name</title>
<ul class="menu">
<li class="res"><a class="res_a">Item 1</a></li>
<li class="res"><a class="res_a">Item 2</a></li>
</ul>
</head>
<hr width = 95%>
<body>
<div class="wrapper">
<div class="left">
<h3 class="name" >My Name</h3>
<p class = "job">
Blah blah blah....
</p>
</div>
<div class="right">
<h1 class="about" >About</h1>
<p class = "bio">
Main content blah blah blah...
</p>
</div>
</div>
</body>
</html>
.css file:
html, body {
display: inline-block;
align-items: left;
justify-content: left;
height: 100%;
margin: 0px;
padding: 0px;
font-family: 'Castoro', serif;
}
.name {
font-family: 'Castoro', serif;
margin-bottom: 2px;
}
.wrapper {
max-width: 90%;
display: flex;
flex-flow: column wrap;
height: 80%;
}
.left {
background-color: white;
margin: 15px;
max-width: 22%;
flex: 1;
display: flex;
flex-direction: column;
align-items: left;
padding: 5px 5px 5px 5px;
/* flex: 50%; */
}
.job {
font-size: 14px
}
.right {
background-color: white;
margin: 5px;
max-width: 78%;
flex: 100%;
display: flex;
flex-direction: column;
}
.menu {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 18px;
overflow: hidden;
background-color: white;
}
.menu a{
display: block;
/* color: white; */
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu li a
{
position: relative;
}
.menu li a:not(.active):before {
content: "";
position: absolute;
width: 100%;
height: 4px;
bottom: 0;
left: 0;
background-color: black;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out;
}
.menu li a:not(.active):hover:before {
visibility: visible;
transform: scaleX(1);
}
Head is different from header.
Change it fast.
Now one quick way of making the layout you ask about, its to know how to do a media query.
Use the wrapper with flex-direction: column for the mobile layout,
And inside the query you can use a different dirección.
#media (min-width: 700px) {
Flex-direction: row;
// and any others changes you need
}
Its like working in 2 different layouts at the beginning. But with practice you make more and more efficient code
Your problem is not very difficult to solve, but you seem to have some very basic misunderstandings about how an HTML page should be formed.
It should always be like this:
<!DOCTYPE html>
<html>
<head>
metadata
</head>
<body>
content
</body>
</html>
Note that <head> does not represent a header on the page - for that, you could use the <header> element, within your <body> of course.
Also, an <hr> element represents a thematic break on the page, so it doesn't make sense to have one at the very beginning.
Okay, now I'll answer your question: Use a media query to change the flex-flow of the wrapper to row at screen sizes larger than 600px.
body {
margin: 0;
padding: 0;
}
.wrapper {
max-width: 90%;
display: flex;
flex-flow: column wrap;
height: 80%;
}
.wrapper > * {
flex-basis: 100%;
}
#media screen and (min-width: 600px) {
.wrapper {
flex-flow: row;
}
}
<h1>Resize the window to see the layout change...</h1>
<div class="wrapper">
<div class="left">
<h3 class="name">My Name</h3>
<p class="job">
Blah blah blah....
</p>
</div>
<div class="right">
<h3 class="about">About</h3>
<p class="bio">
Main content blah blah blah...
</p>
</div>
</div>
Here's how my child divs look and I'm trying to make them have less space in between when they wrap
I think the problem is in the media query
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
width: 100%;
}
html,
body {
margin: 0;
height: 100%;
width: 100%;
/* added the line above remove if erros */
}
.container-2 {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-color: red;
align-items: center;
}
.item {
margin: 2% 1%;
width: 95%;
height: 12%;
background-color: yellow;
border: solid black;
border-radius: 1% 1%;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
.container-1 img {
width: 50%;
height: 100%;
}
.container-2 {
flex-direction: row;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}
.item {
margin: 2% 1%;
width: 25%;
height: 12%;
background-color: yellow;
border: solid black;
border-radius: 1% 1%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/menu.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu | Andy's House</title>
</head>
<body>
<div class="container-2">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
</body>
</html>
I want to make them have less space between them. If anyone knows how to, it would be greatly appreciated!
P.S: If you couldn't tell, I am a noob. So, I am sorry :(
The problem wasn’t the media query. I would change the container height to auto. Like this:
.container-2 {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
background-color: red;
align-items: center;
}