I'm making my first website, but i can't make the icon to vertically align with the text
if i used Font Awesome icons it works great, but i don't want to use it.
here is my code and the image to better describe my problem.
"Can't align the arrow icon with text" Image
.icon {
width: 20px;
height: 20px;
padding-left: 10px;
margin-right: -12px;
}
.link {
display: block;
text-decoration: none;
font-size: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.leftDiv {
width: 200px;
height: 100%;
background-color: lightgray;
padding-top: 10px;
box-shadow: rgba(0, 0, 0, 0.5) 3px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Nature Gallery</title>
<link rel="shortcut icon" href="Icon/NG.png" />
<link href="Style/StyleSheet1.css" rel="stylesheet" />
<link href="Content/font-awesome.css" rel="stylesheet" />
</head>
<body>
<div class="leftDiv">
<a href="Home.html" class="link">
<i class="fa fa-long-arrow-right"></i> Home
</a>
<a href="Home.html" class="link">
<img src="Icon/long-arrow-alt-right-solid.svg" class="icon" /> Home
</a>
<a href="Home.html" class="link">
<img src="Icon/long-arrow-alt-right-solid.svg" class="icon" style="vertical-align:middle;" /> Home
</a>
</div>
</body>
</html>
First, add this to .link:
display: flex;
align-items: center;
justify-content: center;
Then, add this to .leftDiv:
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
Your code should look like this:
.icon {
width: 20px;
height: 20px;
padding-left: 10px;
margin-right: -12px;
}
.link {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
text-decoration: none;
font-size: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.leftDiv {
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
width: 200px;
height: 100%;
background-color: lightgray;
padding-top: 10px;
box-shadow: rgba(0, 0, 0, 0.5) 3px 0px 10px;
}
Here is a complete guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I think the problem can be fixed by using padding-bottom for the icon:
.icon {
width: 20px;
height: 20px;
padding-left: 10px;
padding-bottom: 5px;
margin-right: -12px;
}
The padding-bottom can then be added or subtracted based on the amount of padding you may need to vertically align the elements.
Related
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,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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>
* {
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;
}
Desired Ui
I'm trying to make a search bar with a button to the right of it, in which both are halfway overlapping a banner. Above both of these is a title (One issue I'm having is the title covering the search bar when the page shrinks).
I have already made it, but it is far from mobile responsive. The most important thing I am struggling with is the button going to the next line when the page shrinks. The button needs to stay square so how do I make the search bar the only thing shrinking? Does anyone have any ideas on how to make this look good at all sizes?
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.root {
width: 100%;
height: 100%;
}
.header {
height: 50%;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
font-size: 30px;
border-bottom: solid 2px;
}
.search {
z-index: 20;
position: absolute;
background: transparent;
padding: 20px;
width: 100%;
text-align: center;
height: 20px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
}
.search_main {
background: white;
width: auto;
padding: 10px;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
border-radius: 20px;
height: 100%;
border: solid 2px;
}
.search_input {
/* border-radius: 20px; */
border: solid 0px;
outline: none;
text-decoration: none;
height: 100%;
padding: 8px;
}
.btn {
background: white;
width: auto;
/* padding:10px; */
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
border-radius: 50%;
/* height:100%; */
border: solid 2px;
padding: 7px;
margin-left: 20px;
}
.ionicon {
/* width: 35px;
height: 35px; */
font-size: 25px;
font-weight: 40;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="root">
<div class="header">
Search from hundreds of recepies.
</div>
<div class="search">
<div class="search_main"><input class='search_input' placeholder='Search...'></div>
<div class="btn">
<ion-icon name="filter-outline" class='ionicon'></ion-icon>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
margin-top on the button itself may be the answer but it feels wrong to me. If it is hopefully an answer will confirm. What is the best solution to lower the button a smidgen?
The codepen for extra context: https://codepen.io/AdanRod133/full/WNZEYJX
body {
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: coral;
display: grid;
grid-template-columns: 100px 300px 115px;
grid-row-gap: 1em;
justify-content: space-around;
align-items: center;
width: 50%;
height: 100px;
padding: 10px;
}
img {
width: 100%;
height: 100%;
background-color: #2D8C9E;
}
.btn-learn {
justify-self: center;
align-self: center;
height: 40px;
border: none;
border-radius: 10px;
width: 125px;
}
.body-title {
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
}
.text-body {
font-size: 16px;
grid-column: 3 / 5;
}
<div class="container">
<img src="" alt="">
<div class="content">
<h3 class="body-title">
Startup
</h3>
<p class="text-body">Create Websites Online using the Startup Boostrap 5 builder</p>
</div>
<button class="btn btn-learn">Learn More <i class="fas fa-arrow-right"></i></button>
</div>
I have wrapped your button in a flex container and used its property align-items: center
There were also some styling changes I have made
you have made three column in grid with 100px 300px and 100px
but assigned the button with width: 125px that will make the styling error
<div class="container">
<img src="" alt="">
<div class="content">
<h3 class="body-title">
Startup
</h3>
<p class="text-body">Create Websites Online using the Startup Boostrap 5 builder</p>
</div>
<div class="button-container">
<button class="btn btn-learn">Learn More <i class="fas fa-arrow-right"></i></button>
</div>
</div>
body{
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
background-color: coral;
display: grid;
grid-template-columns: 100px 300px 125px;
grid-row-gap: 1em;
justify-content: space-between;
align-items: center;
width: 40%;
height: 90px;
padding: 5px 20px;
}
img{
width: 100%;
height: 100%;
background-color: #2D8C9E;
}
.btn-learn{
/* justify-self: center; */
/* align-self: center; */
height: 40px;
border: none;
border-radius: 10px;
width: 100%;
/* margin-top: 16px; */
}
.body-title{
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
}
.text-body{
font-size: 16px;
grid-column: 3 / 5;
}
.button-container
{
height: 100%;
margin: 0;
padding: 0;
display: flex;
align-items:center
}
You should restructure your div in a better way. For example, I think you are looking for content box like this:
I would suggest you to use Bootstrap if you are new to front-end web development.
Here is an example of how your Bootstrap-5 code looks.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
<style>
body {
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
img {
width: 100%;
height: 100%;
background-color: #2d8c9e;
}
.btn-learn {
justify-self: center;
align-self: center;
height: 40px;
border: none;
border-radius: 10px;
width: 125px;
}
.body-title {
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
}
.text-body {
font-size: 16px;
grid-column: 3 / 5;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-2">
<img src="" alt="" />
</div>
<div class="col-8">
<h3 class="body-title">Startup</h3>
<p class="text-body">Create Websites Online using the Startup Boostrap 5 builder</p>
</div>
<div class="col-2 d-flex flex-column justify-content-center">
<button class="btn btn-learn">Learn More <i class="fas fa-arrow-right"></i></button>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Here is the css file .
body {
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: coral;
display: flex;
flex-wrap:no-wrap;
justify-content: space-between;
align-items: center;
width: 80%;
height: 100px;
padding: 10px;
}
img {
width: 100px;
height: 100px;
background-color: #2D8C9E;
}
.content {
padding:0% 2%;
}
.body-title {
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
}
.text-body {
font-size: 16px;
grid-column: 3 / 5;
}
.btn-learn {
height: 40px;
border: none;
border-radius: 10px;
width: 125px;
}
And html file like this
<div class="container">
<img src="" alt="">
<div class="content">
<h3 class="body-title">
Startup
</h3>
<p class="text-body">
Create Websites Online using the Startup Boostrap 5 builder
</p>
</div>
<button class="btn btn-learn">
Learn More
<i class="fas fa-arrow-right"></i>
</button>
</div>
Here is the result: https://codepen.io/AdanRod133/full/WNZEYJX
.btn-learn{
position: relative;
height: 40px;
border: none;
border-radius: 5px;
background-color: #00A57F;
color: #D8D7DF;
height: 2.5em;
padding: 10px 25px;
outline: none;
cursor: pointer;
display: inline-block;
justify-self: end;
transition: all .2s ease-in-out;
}
I got rid of the width and set the button to inline-block. Then added some padding.
I wanted to make something css-grid only in order to get more practice in.
Working with the padding as well as adding grid gap allowed the items to
sit where I wanted them to.
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 trying to build simple landing looking at figma. The problem I am facing is with photo inside flexbox. In the line I have image->description->image. I made this in the single row line. Last image on the ride side should get 2/3 of the screen,I want it to stay right after paragraph and here is the result.If I make image bigger it will jump into bottom.Using flex didnt help. The issue line starts from "Div class="Main-content" in css and html.Please I need your advice.Thanks in advance
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
display: flex;
flex-wrap: wrap;
width: 70%;
margin: auto;
align-items: center;
}
.logo {
justify-content: flex-start;
padding: 25px 15px 0px 0px;
}
.site-desc {
width: 300px;
justify-content: flex-end;
padding: 30px 15px 0px 10px;
font-size: 12px;
}
.contact-info {
justify-content: flex-end;
text-align: center;
flex: 1;
padding: 25px 0px 0px 0px;
}
.contact-info img {
padding: 0px 5px 0px 0px;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 70%;
margin: auto;
}
.introduction {
font-weight: 700;
font-size: 30px;
line-height: 45px;
align-self: flex-start;
padding: 30px 0px 0px 0px;
width: 100%;
}
span {
color: orangered;
}
.kitchen-types {
padding: 30px 0px 0px 0px;
font-size: 33px;
align-self: flex-start;
font-weight: 300;
}
.main-content {
display: flex;
flex-wrap: wrap;
width: 70%;
margin: auto;
padding-top: 5rem;
padding-left: 2.5rem;
position: relative;
height: 70vh;
background: tomato;
justify-content: flex-start;
align-items: flex-start;
}
.left-side {
position: relative;
}
.art-board {
position: absolute;
right: 100px;
bottom: 185px;
}
.main-content-text {
position: relative;
font-size: 17px;
padding: 15px 20px 0px 28px;
line-height: 20px;
}
.arrow {
position: absolute;
bottom: 220px;
right: 30rem;
}
.left-side-text {
position: relative;
padding-left: 15px;
}
.short-desc-2 {
padding-top: 10px;
}
.yellow-checked {
position: absolute;
}
.yellow-checked-2 {
position: absolute;
top: 30;
}
.yellow-checked-2,
.yellow-checked {
right: 99%;
}
.main-content-text h4 {
padding-bottom: 20px;
width: 52%;
}
.left-side-cover {
flex: 2;
}
.left-side-cover img {
height: 30vh;
}
<html>
<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">
<link rel="stylesheet" href="style.css">
<title>Like Mebel</title>
</head>
<body>
<header>
<div class="logo">
<img src="images/frame.svg" alt="frame">
</div>
<div class="site-desc">
<p>Изготавливаем и устанавливаем кухни в Москве и области с 2004 года</p>
</div>
<div class="contact-info">
<h2>+7 (995) 508-51-17</h2>
<p><img src="images/online.svg">сейчас работаем</p>
</div>
</header>
<main>
<section class="container">
<div class="introduction">
<h2 class="text-color-type">
Современные Комфортные Кухни <span><br/>с пожизненной гарантией</span>
</h2>
<h2 class="kitchen-types">Тренды дизайна кухни 2020 г.</h2>
</div>
</section>
<div class="main-content">
<div class="left-side">
<img src="images/image163.png">
<img class="art-board" src="images/Artboard21.png" alt="">
</div>
<div class="main-content-text">
<h4>Максимальное использование пространства и простота в уходе</h4>
<img class="arrow" src="images/Vector.png" alt="vector">
<div class="left-side-text">
<img class="yellow-checked" src="images/Group 839.png" alt="group">
<p class="short-desc">Гладкие, ровные поверхности без ручек</p>
<img class="yellow-checked-2" src="images/Group 839.png" alt="group">
<p class="short-desc-2"> «Умные» материалы фасадов —<br/> нет отпечатков и царапин</p>
</div>
</div>
<div class="left-side-cover">
<img src="images/Group87.png">
</div>
</div>
</main>
</body>
</html>
Sorry i am not allowed to comment yet, but try putting a width:auto; or whatever the value you have height set to for the img. and margin-bottom: auto; to
<div class="left-side-cover">
<img src="images/Group87.png">
</div>