based on my question above, below is my current design when in webview
From the picture above, there a three circles which in horizontally. But, when I change it to phone view (landscape), it will be like below:
The three circles become to big. Now, how to fix the size so that it not become bigger?
Below is my current code:
<head>
<style>
.prolist {
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
}
.img2{
border-radius: 50%;
border-style: solid;
border-color: #53bbeb;
width: 60.2%;
}
.span1{
font-weight: bold;
text-decoration: underline;
}
.center {
text-align: center;
}
#media screen and (max-width: 425px) {
.prolist {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.img2 {
border-radius: 50%;
border-style: solid;
border-color: #53bbeb;
flex-wrap: wrap;
width: 30%;
}
}
</style>
</head>
<h3 class="title">Shareholders Return</h3>
<div class="clearfix"> </div>
<div class ="col10 paddingLR left">
<img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Shareprice_chart_ir.png" alt="" width="100%" height="100%" />
</div>
<div class = "col2 paddingLR right">
<div class="row center">
<span class="span1">Additional Information on Stock Chart</span>
<div class="clearfix"> </div>
<div class="item2" align="center">
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Bursa Malaysia.JPG" alt=""/><br>
<a target="_blank" href="https://www.bursamalaysia.com/trade/trading_resources/listing_directory/company-profile?stock_code=7113"> Bursa</a><br><br>
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/SGX.JPG" alt=""/><br>
<a target="_blank" href="https://www2.sgx.com/securities/equities/BVA"> SGX Link</a><br><br>
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/BNY Mellon.JPG" alt=""/><br>
<a target="_blank" href="https://www.adrbnymellon.com/?cusip=890534100">U.S ADR</a>
</div>
</div>
</div>
If you want to make it responsive, you can use a responsive CSS framework like bootstrap.
Here the bootstrap version of your Code :
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row">
<h3 class="title">Shareholders Return</h3>
<div class="clearfix"> </div>
<div class ="col col-10 paddingLR left">
<img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Shareprice_chart_ir.png" alt="" width="100%" height="100%" />
</div>
<div class = "col col-2 paddingLR right">
<div class="center">
<span class="span1">Additional Information on Stock Chart</span>
<div class="clearfix"> </div>
<div class="item2" align="center">
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Bursa Malaysia.JPG" alt=""/><br>
<a target="_blank" href="https://www.bursamalaysia.com/trade/trading_resources/listing_directory/company-profile?stock_code=7113"> Bursa</a><br><br>
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/SGX.JPG" alt=""/><br>
<a target="_blank" href="https://www2.sgx.com/securities/equities/BVA"> SGX Link</a><br><br>
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/BNY Mellon.JPG" alt=""/><br>
<a target="_blank" href="https://www.adrbnymellon.com/?cusip=890534100">U.S ADR</a>
</div>
</div>
</div>
I have fixed the problem.Now the size will not be big when in mobile view.
<html>
<head>
<style>
.prolist {
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
}
.img1{
width:92%;
}
.img2 {
border-radius: 50%;
position: static;
border-style: solid;
border-color: #53bbeb;
width: 50%;
height: 50%;
}
.item2 {
width: 15%;
height: 100px;
margin-top: -600px;
margin-right: auto;
margin-left: 1px;
/* margin-bottom: 3000px; */
/* top: -100px; */
float: right;
}
.span1 {
font-weight: bold;
float: right;
width: 15%;
padding-top: px;
margin-top: -720px;
text-decoration: underline;
}
.center {
text-align: center;
}
#media screen and (max-width: 425px) {
.prolist {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.img2 {
border-radius: 50%;
border-style: solid;
border-color: #53bbeb;
flex-wrap: wrap;
width: 30%;
}
}
</style>
</head>
<Body>
<h3 class="title">Shareholders Return</h3>
<div class="clearfix"> </div>
<div class ="col10 paddingLR left">
<img class="img1" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Shareprice_chart_ir.png" alt="" width="100%" height="100%" />
</div>
<div class = "col2 paddingLR right">
<div class="row center">
<span class="span1">Additional Information on Stock Chart</span>
<div class="clearfix"> </div>
<div class="item2" align="center">
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Bursa Malaysia.JPG" alt=""/><br>
<a target="_blank" href="https://www.bursamalaysia.com/trade/trading_resources/listing_directory/company-profile?stock_code=7113"> Bursa</a><br><br>
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/SGX.JPG" alt=""/><br>
<a target="_blank" href="https://www2.sgx.com/securities/equities/BVA"> SGX Link</a><br><br>
<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/BNY Mellon.JPG" alt=""/><br>
<a target="_blank" href="https://www.adrbnymellon.com/?cusip=890534100">U.S ADR</a>
</div>
</div>
</div>
</Body>
</html>
Related
I am trying to get three href links in the class nav-link-wrapper and class logo which is also a logo image over the class mainImage here is my CSS code , all the links and logo is below the image instead of on it at the top of the image , links on the to top left and logo on the top right
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 30px;
}
.left-side {
display: flex;
}
.mainImage {
position: relative;
width: 100%;
height: 60%;
}
.logo {
position: absolute;
top: 10px;
right: 10px;
position: relative;
}
.container>.nav-wrapper>.left-side>.nav-link-wrapper {
margin-right: 20px;
font-size: 0.9em;
justify-content: space-around;
}
<div class="container">
<img class="mainImage" src="https://via.placeholder.com/800" alt="Auckland, New Zealand" style="width:100%;height:60%;">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Hlavní Stránka
</div>
<div class="nav-link-wrapper">
Naše Projekty
</div>
<div class="nav-link-wrapper">
Náš Kontakt
</div>
</div>
<div class="right-side">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="investice do zahraničí" style="width: 150px;height: 150px;">
</div>
</div>
</div>
</div>
.container {
position: relative;
}
.nav-wrapper {
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%
}
.left-side {
display: flex
}
.nav-link-wrapper {
padding: 10px
}
.right-side {
border: 1px solid black
}
<div class="container">
<img class="mainImage" src="https://via.placeholder.com/800" alt="Auckland, New Zealand" style="width:100%;height:60%;">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Hlavní Stránka
</div>
<div class="nav-link-wrapper">
Naše Projekty
</div>
<div class="nav-link-wrapper">
Náš Kontakt
</div>
</div>
<div class="right-side">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="investice do zahraničí" style="width: 150px;height: 150px;">
</div>
</div>
</div>
</div>
I have created a landing page for a SharePoint site with graphics. I have noticed that when resizing the browser window to that of something like a tablet or mobile device, the page/graphics aren't responsive and adjusting to the sizing.
I came across a few posts in relation to my issue, but none were very helpful.
Here is my HTML/CSS:
html, body {
margin: 0;
height: 100%;
}
.img_container {
border: none;
width: 70%;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #b3ab7d;
}
a:hover {
color: #b3ab7d;
}
.background {
background: #104723;
width: 150px;
height: 150px;
}
.img {
width: 70%;
display: block;
margin: 0 auto;
}
a {
display: block;
text-align: center;
}
.text{
font-size: 70%;
}
*{
box-sizing: border-box;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
h1{
text-align: center;
color: #104723;
top: -10px;
}
<head>
<h1><strong>G3G Controls</strong></h1>
</head>
<div class="center">
<div class="img_container">
<a href="/ACControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Access Control (AC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/IAControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Identification & Authentication (IA)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/MPControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Media Protection (MP)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/PEControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Physical Protection (PE)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/SCControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Communications Protection (SC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/SIControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Information Integrity (SI)</span>
</div>
</a>
</div>
</div>
You have used flexboxes that was enough to make stuff responsive the property you were lacking was setting a flex-wrap:wrap for the .center class which will let the images wrap to the next line as soon as the width of the container element reduces.
AlsoThe .img_container for the images was creating an issue due to its width:70% and it also needs to be set to display:flex which will allow these images to accommodate side by side as you want. I also changed The container element .center width to 100%.
The Proposed Code
html, body {
margin: 0;
height: 100%;
}
.img_container {
display:flex;
border: none;
padding: 10px;
height: auto;
display: block;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #b3ab7d;
}
a:hover {
color: #b3ab7d;
}
.background {
background: #104723;
width: 150px;
height: 150px;
}
.img {
width: 100%;
display: block;
margin: 0 auto;
}
a {
display: block;
text-align: center;
}
.text{
font-size: 70%;
}
*{
box-sizing: border-box;
}
.center {
width:100%;
display: flex;
justify-content:center;
flex-wrap:wrap;
}
h1{
text-align: center;
color: #104723;
top: -10px;
}
<h1>The Topic</h1>
<div class="center">
<div class="img_container">
<a href="/ACControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Access Control (AC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/IAControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Identification & Authentication (IA)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/MPControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Media Protection (MP)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/PEControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">Physical Protection (PE)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/SCControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Communications Protection (SC)</span>
</div>
</a>
</div>
<div class="img_container">
<a href="/SIControls.aspx" class="btn">
<div class="background">
<img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
<span class="text">System & Information Integrity (SI)</span>
</div>
</a>
</div>
</div>
One Important thing - In your code snippet in the HTML you have declared a <h1> heading at the top inside a <head> tag. Pls don't do this <head> tag is always used outside the <body> element that too to declare meta data which doesn't supposed to be visible in the browser. Their are other semantic tags to use inside the <body> element and I think you might have got confused with <header> tag which can be used inside the <body> element.
Do tell me whether I was of any Help :)
This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
I'm developing a simple webpage with elements of flexbox. In one section I have logos of project with description to them. Unfortunately, all of the projects have logos in a different size. How can I receive the result as on picture?
My current code (HTML)
<div id="Projects">
<a href="http://www.project1.com">
<div id="ProjectL">
<img class="img-responsive" src="{% static 'images/logos/project1.png' %}" alt="project" style=" margin-left: auto; max-width: 200px; align-items: flex-start;">
<div id="desk" style="align-items: flex-end;"> Project ONE</div>
</div>
</a>
<a href="http://www.project2.com">
<div id="ProjectL">
<img class="img-responsive" src="{% static 'images/logos/project2.png' %}" alt="project" style=" margin-left: 35px; max-width: 200px; align-items: flex-start;">
<div id="desk" style="align-items: flex-end;">Project TWO</div>
</div>
</a>
<a href="http://www.project3.com">
<div id="ProjectL">
<img class="img-responsive" src="{% static 'images/logos/project3' %}" alt="project" style=" margin-left: 35px; max-width: 200px; align-items: flex-start;">
<div id="desk" style="align-items: flex-end;"> PROJECT THREE</div>
</div>
</a>
<a href="http://www.project4.com">
<div id="ProjectL">
<img class="img-responsive" src="{% static 'images/logos/project4' %}" alt="project" style=" margin-left: 35px; margin-right: auto; max-width: 200px; align-items: flex-start;">
<div id="desk" style="align-items: flex-end;"> Project FOUR</div>
</div>
</a>
</div>
CSS
#Projects {
display: flex;
flex-direction: row;
font-family: sans-serif;
padding-bottom: 40px;
}
#ProjectL {
display: flex;
flex-direction: column;
font-family: sans-serif;
padding-bottom: 40px;
}
I created a really quick Codepen with a solution that works if you know that your logos aren't going to have heights higher than the container I called projects__item-top. Maybe you could set a maximum size for the logos?
Here's the code:
HTML
<div class="projects">
<a class="projects__item" href="www.link.com" aria-label="Project 1">
<div class="projects__item-top">
<img src="https://source.unsplash.com/random/200x60" alt="" />
</div>
<div class="projects__item-description">
<h3>Description 1</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
<a class="projects__item" href="www.link.com" aria-label="Project 2">
<div class="projects__item-top">
<img src="https://source.unsplash.com/random/200x50" alt="" />
</div>
<div class="projects__item-description">
<h3>Description 2</h3>
</div>
</a>
<a class="projects__item" href="www.link.com" aria-label="Project 3">
<div class="projects__item-top">
<img src="https://source.unsplash.com/random/200x70" alt="" />
</div>
<div class="projects__item-description">
<h3>Description 3</h3>
</div>
</a>
</div>
CSS
html * {
box-sizing: border-box;
}
.projects {
display: flex;
flex-direction: row;
}
.projects__item {
display: flex;
flex-direction: column;
margin: 10px;
padding: 10px;
}
.projects__item-top {
display: flex;
height: 120px;
align-items: center;
}
I noticed you were using id where you should be using class. An id has to be unique but a class can be re-used.
I hope this helps! Let me know if you have any other issues with it.
I've made this layout add your content inside of it:
HTML
<div class="container">
<div class="project">
<div class="logo-wrapper1">
<div class="logo1">logo 1</div>
</div>
<div class="description-wrapper">
<div class="description">Description 1</div>
</div>
</div>
<div class="project">
<div class="logo-wrapper2">
<div class="logo2">logo 2</div>
</div>
<div class="description-wrapper">
<div class="description">Description 2</div>
</div>
</div>
<div class="project">
<div class="logo-wrapper3">
<div class="logo3">logo 3</div>
</div>
<div class="description-wrapper">
<div class="description">Description 3</div>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.container {
display: flex;
padding: 10px;
border: 1px solid red;
height: 300px;
}
.project {
display: flex;
flex-direction: column;
border: 1px solid red;
padding: 10px;
margin-right: 10px;
}
.logo-wrapper1, .logo-wrapper2, .logo-wrapper3 {
display: flex;
align-items: center;
padding: 10px;
height: 100px;
}
.logo1 {
display: flex;
align-items: center;
border: 1px solid black;
height: 100%;
width: 100%;
}
.logo2 {
display: flex;
align-items: center;
border: 1px solid black;
height: 50%;
width: 100%;
}
.logo3 {
display: flex;
align-items: center;
border: 1px solid black;
height: 80%;
width: 100%;
}
.description-wrapper {
margin-top: 10px;
padding: 10px;
height: 100px;
border: 1px solid black;
}
I am creating a portfolio page in which I am showing my 6 projects, 3 in a row using flexbox. The items inside are flowing out of the flexbox even though I have used flex-wrap. I am relatively new to this so I don't know what is happening.
The red border is my flexbox container and it contains six div elements. Inside each div element, there is one image and another div element which is like a caption. Each image is of a different size
HTML Code:
<section id="work">
<h1><u>These are some of my projects</u></h1>
<div id="work-container">
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
<div id="project-title">Tribute Page</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
<div id="project-title">Random Quote Machine</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
<div id="project-title">JavaScript Calculator</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
<div id="project-title">Map Data Across the Globe</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
<div id="project-title">Wikipedia Viewer</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
<div id="project-title">Tic Tac Toe Game</div>
</div>
</div>
<button id="view-more"></button>
</section>
CSS Used:
#work-container{
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
border: 5px solid red;
}
.work-block{
width: 28%;
margin: 20px;
}
#media (max-width: 1000px) {
.work-block{
width: 45%;
}
}
#work-container img{
height: calc(100% );
width:100%;
margin:0;
padding: 0;
object-fit: cover;
flex:none;
}
There is one particular line which is enabling equal height for all images height: calc(100% );. I don't know how it works, I took it from the internet. It was used to have the equal height for each image.
Also, the bottom and the top margin between blocks is not working.
I want some help in wrapping content inside container properly and understanding how height: calc(100% ); works.
Complete Code: https://codepen.io/tushar_432/pen/poyxmyZ
Don't make the image height:100%, this will make the image take all the space pushing the text outside thus the overflow. Use flexbox to make it fill all the space minuse the text space:
#work-container {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
border: 5px solid red;
}
.work-block {
width: 28%;
margin: 20px;
}
#media (max-width: 1000px) {
.work-block {
width: 45%;
}
}
.work-block {
display:flex; /* here */
flex-direction:column; /* here */
}
.work-block img {
width: 100%;
margin: 0;
padding: 0;
object-fit: cover;
flex: 1; /* here */
}
<section id="work">
<h1><u>These are some of my projects</u></h1>
<div id="work-container">
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
<div id="project-title">Tribute Page</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
<div id="project-title">Random Quote Machine</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
<div id="project-title">JavaScript Calculator</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
<div id="project-title">Map Data Across the Globe</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
<div id="project-title">Wikipedia Viewer</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
<div id="project-title">Tic Tac Toe Game</div>
</div>
</div>
</section>
Your caption is overflowing, you can add
display: flex;
flex-direction: column;
to your .work-block
#import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght#400;700&family=Catamaran:wght#400;600&family=Raleway:ital#1&display=swap');
*,*::before,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
top:0;
}
body{
background-color: bisque;
font-family: 'Catamaran', sans-serif;
text-align: center;
}
#header{
position: sticky;
top:0px;
margin:0;
}
#navbar{
color:white;
width:100%;
display: flex;
background-color:#12343b;
flex-direction: row;
justify-content: flex-end;
padding:18px;
font-family: 'Catamaran', sans-serif;
font-size: x-large;
font-weight: 450;
border-bottom: 2px solid white;
}
.nav-block:hover{
color:#e1b382;
}
.nav-block{
padding:0 20px;
}
#about h1{
font-family: 'Alegreya Sans', sans-serif;
font-weight: 700;
font-size: 65px;
color: #fefefe;
}
#about h3{
font-size:24px;
font-family: 'Raleway', sans-serif;
color: #e1b382;
}
#about{
text-align: center;
padding:250px;
background-color:#2d545e;
color:white;
}
#work{
padding:50px 0;
background-color: #e1b382;
}
#work h1{
font-weight: 600;
font-size: 40px;
color: #12343b;
}
#work-container{
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
border: 5px solid red;
}
.work-block{
width: 28%;
margin: 20px;
display: flex;
flex-direction: column;
}
#media (max-width: 1000px) {
.work-block{
width: 45%;
}
}
#work-container img{
height: calc(100% );
width:100%;
margin:0;
padding: 0;
object-fit: cover;
flex:none;
}
#contact{
padding:150px;
background-color: #2d545e;
}
#contact-container{
display: flex;
}
#footer{
padding:40px;
background-color:#2d545e;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<header id="header">
<nav id="navbar">
<div class="nav-block">About</div>
<div class="nav-block">Work</div>
<div class="nav-block">Contact</div>
</nav>
</header>
<section id="about">
<h1>Hey I am Tushar</h1><br>
<h3>a computers <br>and technology enthusiast</h3>
</section>
<section id="work">
<h1><u>These are some of my projects</u></h1>
<div id="work-container">
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
<div id="project-title">Tribute Page</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
<div id="project-title">Random Quote Machine</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
<div id="project-title">JavaScript Calculator</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
<div id="project-title">Map Data Across the Globe</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
<div id="project-title">Wikipedia Viewer</div>
</div>
<div class="work-block">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
<div id="project-title">Tic Tac Toe Game</div>
</div>
</div>
<button id="view-more"></button>
</section>
<section id="contact">
<h1>Let's Work Together</h1>
<p>How do you take your coffee?</p>
<div id="contact-container">
<div class="contact-block">
<i class="fab fa-facebook"></i><span>Facebook</span>
</div>
<div class="contact-block">
<i class="fab fa-github"></i><span>Github</span>
</div>
<div class="contact-block">
<i class="fas fa-hashtag"></i><span>Twitter</span>
</div>
<div class="contact-block">
<i class="fas fa-at"></i><span>Send a mail</span>
</div>
<div class="contact-block">
<i class="fas fa-mobile-alt"></i><span>Call me</span>
</div>
</div>
</section>
<footer id="footer">
<span>**This is just a fake portfolio. All the projects and contact details given are not real.</span>
<span>© Created for freeCodeCamp </span>
</footer>
I am trying to align an icon with some text like this:
however it comes out like this:
.percent {
float: right;
display: inline-block;
position: relative;
}
.card-icon {
float: left;
}
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<p class="percent"> <img class="card-icon" src="app/assets/images/self.png" alt="Smiley face"> 1% </p>
EDIT ****
With the last answer provided it shows up like this:
.card-icon {float: left;margin-right:10px; }
<style type="text/css">
</style>
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<div class = "percent">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<div class="card-txt"> 1% </div>
</div>
</div>
</div>
Try to use inline-block instead of floats:
.card-icon {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
}
.card-icon:after {
content: "=";
position: absolute;
right: -16px;
top: 50%;
transform: translateY(-50%);
}
.percent .card-txt:nth-of-type(1) {
text-align: center;
}
.card-txt {
display: inline-block;
vertical-align: middle;
text-align: center;
margin-left: 24px;
}
.block {
display: block;
}
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<div class="percent">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<div class="card-txt">
<span class="block">1%</span>
<span class="block">service tax + VAT</span>
</div>
</div>
</div>
</div>
Sometimes the best solution is an old solution. Using HTML tables allows you to control vertical height with a high level of browser support, and backwards compatibility. Using this approach also make the element responsive. Other solutions that adopt the relative/absolute position method can suffer when resizing browser window size.
table {
margin: 0 auto;
border: 1px solid blue;
}
table tr td {
padding: 10px;
width: 100px;
text-align: center;
vertical-align: middle;
position: relative;
}
table tr .number-cell {
padding-top:10px;
width: 80px;
}
table tr .number-cell .value {
margin-top: 4px;
font-size: 42px;
}
table tr .number-cell .sub-heading {
background: grey
}
table tr .equal-cell {
width: 0px;
}
table tr td img {
width: 100%;
}
<div>
<h1>MY WEBSITE</h1>
<table>
<tr>
<td class="image-cell">
<img src="https://www.fillmurray.com/100/100"/>
</td>
<td class="equal-cell">
<span class="equal">=</span>
</td>
<td class="number-cell">
<div class="value">1%</div>
<div class="sub-heading">service fee</div>
</td>
</tr>
</table>
</div>
.card-icon {float: left;position:relative;z-index:1; }
.card-icon:after {content:"=";position:relative; left:25px;}
.percent .card-txt:nth-of-type(1) {text-align:center;position:relative; left:-55px;}
.card-txt {text-align:center; width:400px;background:#ddd;}
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<div class = "percent">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<div class="card-txt"> 1% </div>
<div class="card-txt"> service tax + VAT </div>
</div>
</div>
</div>
If you want more controle you can use flex styling. An example:
.card {
position: relative;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
width: 500px;
}
.card-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;
background-color: blue;
color: white;
font-size: 24px;
}
.card-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: gray;
}
.card-header > img {
position: absolute;
right: 0;
width: 50px;
height: 50px;
}
<div class="card">
<div class="card-header">
<span>Self Managed</span>
<img src="app/assets/images/star.png" alt="">
</div>
<div class="card-content">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<span>1%</span>
</div>
</div>