In the following code snippet I have some html and css code. What I want to do is to get a perfect white circle outside logos. Is anyone able to help me? I tried to do it by adding border to logo and making its radius 50% but it didn't worked out. It didn't get me a perfect circle.
h2 {
color: #fff;
font-size: 2rem;
text-align: center;
}
.my-skills {
background-color: #353353;
}
.skill-div {
display: inline-block;
width: 23%;
padding: 1%;
}
.skill-div i {
font-size: 7rem;
padding: 15%;
border: 2px solid #fff;
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
<!-- Fonts awesome link -->
<script src="https://kit.fontawesome.com/4e3ab997f9.js" crossorigin="anonymous"></script>
<head>
<section class="my-skills">
<h2>My skills</h2>
<div class="icon-collection">
<div class="skill-div">
<i class="fas fa-palette design-skill"></i>
<h4>Design</h4>
</div>
<div class="skill-div">
<i class="fab fa-html5 html-skill"></i>
<h4>HTML</h4>
</div>
<div class="skill-div">
<i class="fab fa-css3-alt css-skill"></i>
<h4>CSS</h4>
</div>
<div class="skill-div">
<i class="fab fa-js-square js-skill"></i>
<h4>JavaScript</h4>
</div>
</div>
</section>
</html>
As mentioned in my comment, to make that circle with border radius, you need to make sure the element is a square first, then your 50% border radius would be a circle instead of an oval
I added a div wrapper to the logos, class circle. The width and height is just a number I came up with to contain the logos. You can make small adjustments to the vertically longer logos if you want to further center them vertically.
I made the css logo lower with margin top to better vertically center it. Ideally these logos would be in a sprite and should be the same size so these micro adjustment won't be needed.
Alternatively, I made the html logo less in height which also vertically centers it better due to my use of flex. But again, it is better for everyone if these micro adjustment can be avoided
h2 {
color: #fff;
font-size: 2rem;
text-align: center;
}
.my-skills {
background-color: #353353;
}
.skill-div {
display: inline-block;
width: 24%;
padding: 1%;
}
.skill-div i {
font-size: 3rem;
}
.circle {
width: 60px;
height: 60px;
border: 1px solid white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.css-skill {
margin-top: 5px;
}
.html-skill {
height: 44px
}
<!DOCTYPE html>
<html>
<head>
<!-- Fonts awesome link -->
<script src="https://kit.fontawesome.com/4e3ab997f9.js" crossorigin="anonymous"></script>
<head>
<section class="my-skills">
<h2>My skills</h2>
<div class="icon-collection">
<div class="skill-div">
<div class="circle"><i class="fas fa-palette design-skill"></i></div>
<h4>Design</h4>
</div>
<div class="skill-div">
<div class="circle"><i class="fab fa-html5 html-skill"></i></div>
<h4>HTML</h4>
</div>
<div class="skill-div">
<div class="circle"><i class="fab fa-css3-alt css-skill"></i></div>
<h4>CSS</h4>
</div>
<div class="skill-div">
<div class="circle"><i class="fab fa-js-square js-skill"></i></div>
<h4>JavaScript</h4>
</div>
</div>
</section>
</html>
h2 {
color: #fff;
font-size: 2rem;
text-align: center;
}
.my-skills {
background-color: #353353;
}
.skill-div {
display: inline-block;
width: 23%;
padding: 1%;
}
.skill-div i {
width:7rem;
height:7rem;
font-size: 5rem;
display : flex;
align-items: center;
justify-content: center;
border : 2px solid white;
border-radius : 50%;
}
<!DOCTYPE html>
<html>
<head>
<!-- Fonts awesome link -->
<script src="https://kit.fontawesome.com/4e3ab997f9.js" crossorigin="anonymous"></script>
<head>
<section class="my-skills">
<h2>My skills</h2>
<div class="icon-collection">
<div class="skill-div">
<i class="fas fa-palette design-skill"></i>
<h4>Design</h4>
</div>
<div class="skill-div">
<i class="fab fa-html5 html-skill"></i>
<h4>HTML</h4>
</div>
<div class="skill-div">
<i class="fab fa-css3-alt css-skill"></i>
<h4>CSS</h4>
</div>
<div class="skill-div">
<i class="fab fa-js-square js-skill"></i>
<h4>JavaScript</h4>
</div>
</div>
</section>
</html>
Let's see its fine now
Related
i am developing my portfolio website but i came into an error can anyone just help me.
i need to make my social icons responsive.
Here The The Image For Desktop Version.
I need To make it responsive and direction to row for mobile version. Please Help Me.
As You Can See Here The Social Icons Are Not Responsive.
index.html
```
<!-- home -->
<section class="home bd-grid" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, Myself</div>
<div class="text-2">Piyush Shrivastava</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
Download CV
</div>
</div>
<div class="social">
<ul>
<li>
<div class="circle">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</section>```
Styles.css
.home{
display: flex;
flex-wrap: wrap;
background: url("/img/banner.jpg") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: cover;
background-attachment: fixed;
font-family: 'Ubuntu', sans-serif;
}
.home .max-width{
width: 100%;
display: flex;
}
.home .max-width .row{
margin-right: 0;
}
.home .home-content .text-1{
font-size: 27px;
}
.home .home-content .text-2{
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3{
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span{
color: #32de84;
font-weight: 500;
}
.home .home-content a{
display: inline-block;
background: #32de84;
color: #fff;
font-size: 25px;
padding: 12px 36px;
margin-top: 20px;
font-weight: 400;
border-radius: 6px;
border: 2px solid #32de84;
transition: all 0.3s ease;
}
.home .home-content a:hover{
color: #32de84;
background: none;
}
.social{
position: absolute;
top: 35%;
right: 5%;
color: #fff;
/* background-color: #ffffff; */
}
.social ul{
list-style: none;
}
.social li{
margin-bottom: 20px;
text-align: center;
}
.circle{
background-color: transparent;
border: 2px solid white;
border-radius: 200px;
height: 35px;
width: 35px;
}
.social i{
padding-top: 7px;
height: 30px;
width: 30px;
color: #ffffff;
}
#media (max-width: 947px) {
.home .home-content .text-2 {
font-size: 60px;
}
}```
Try thinking of your problem the other way around.
Layout shifts like this are much easier to deal with when working with a 'mobile first' approach. (style the mobile version and then override at a min-width media query to style the desktop version, rather than styling the desktop perfectly and then trying to fold everything down to mobile.)
I've knocked up a quick demo of what should work for you.
This is NOT a direct replication of or fix of your existing code, just a demo of the methods you could use, but hopefully from this demo and the snippets, you should understand what is happening and be able to apply some of these methods to your own code.
The method is entirely done with flex properties.
The socials are no longer absolutely positioned and the unnecessary social wrapper div is removed.
I've added border colors and padding just to more obviously show you whats happening to the box model when you resize your browser.
To view the demo, click 'run code snippet' - but make sure to then also click the 'full page' option otherwise it'd only show you the mobile layout.
Here's the JSFiddle where I created the demo incase it's useful: CLICK TO VIEW FIDDLE
.contentWrapper {
border: 1px solid pink;
padding: 10px;
}
.mainContent {
border: 1px solid blue;
padding: 10px;
}
.social {
border: 1px solid green;
padding: 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
gap: 10px;
}
.circle {
background-color: red;
border: 2px solid white;
border-radius: 200px;
height: 35px;
width: 35px;
}
#media screen and (min-width: 948px) {
.myWrapper {
display: flex;
min-height: 100vh;
flex-direction: row;
}
.contentWrapper {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center
}
.mainContent {
width: calc(100% - 55px);
max-width: 1000px;
margin: 0 auto;
}
.social {
display: flex;
flex-direction: column;
justify-content: center;
}
.social ul {
display: flex;
flex: 0 0 55px;
flex-direction: column;
}
}
<section class="myWrapper">
<div class="contentWrapper">
<div class="mainContent">
<div class="text-1">Hello, Myself</div>
<div class="text-2">Piyush Shrivastava</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
Download CV
</div>
</div>
<ul class="social">
<li>
<div class="circle">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</li>
</ul>
</section>
To make icons in row
we can do it using #media in the approach
APPROACH
Use flexbox to make your icons in a row
and use grid to make everything in a row when you are on a big screen
you can also set width and then add margin auto to make things centre but using justify-content center is better ---> not told in this answer
<!-- home -->
<section class="home bd-grid" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, Myself</div>
<div class="text-2">Piyush Shrivastava</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
Download CV
</div>
</div>
<div class="social">
<ul class="icons"> // give class icons to make it a flexbox
<li>
<div class="circle">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</section>```
***css***
.icons{
display: flex;
flex-direction: column;
justify-content: center;
}
#media screen and (min-width: 800px //your mobile screen width) {
.icons {
display: flex;
justify-content:center;
}
.home{
display:grid;
width: 100vw;
gap: 20px;
text-align:center;
grid-template-column:2fr 2fr;
}
Currently, my divs/elements overlap each other. How can I fix it? If you found more issues in my code let me know. I try with position and other things (eg. margin) but don't work for me or I don't know how to do it. Maybe someone also can help me how to make this menu sticky while scrolling down.
Thanks for your help!
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #282A2E;
font-family: 'Fira Code', monospace;
}
menu {
display: grid;
grid-template-columns: repeat(4, 200px);
grid-gap: 10px;
padding-bottom: 100px;
}
.menu__item {
border: 3px dotted white;
width: 150px;
padding: 10px;
text-align: center;
}
.menu__item a {
text-decoration: none !important;
color: white;
font-size: 20px;
}
#whoami #skills #projects {
padding-bottom: 50px;
}
.description__text {
border: 3px dotted#282A2E;
width: 500px;
float: left;
margin-left: 200px;
height: 399px;
text-align: center;
background-color: white;
}
.description__text h1 {
color: #282A2E;
font-size: 50px;
}
.description__text p {
color: #282A2E;
}
.section__header h1 {
width: auto;
height: 50px;
border: 3px dotted#282A2E;
background-color: white;
display: block;
margin-top: auto;
text-align: center;
padding-top: 10px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght#500&display=swap" rel="stylesheet">
<script src="hereFontAwesome" crossorigin="anonymous"></script>
</head>
<body>
<div id="container">
<menu>
<div class="menu__item">
whoami
</div>
<div class="menu__item">
skills
</div>
<div class="menu__item">
projects
</div>
<div class="menu__item">
contact
</div>
</menu>
<section id="whoami">
<img src="./images/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg"
style="border: 2px solid white; float: right; margin-right: 200px; ">
<article class="description__text">
<h1>Who am I?</h1>
<p>TEST!</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
</article>
</section>
<section id="skills">
<div class="section__header">
<h1>
My skills
</h1>
</div>
<article style="margin-top: 100px;">
<div style="color: white;display: grid;
grid-template-columns: repeat(3, 500px); gap:50px;
text-align: center; justify-content:center">
<i class="fab fa-html5 fa-5x"></i>
<i class="fab fa-css3-alt fa-5x"></i>
<i class="fab fa-sass fa-5x"></i>
<i class="fab fa-js-square fa-5x"></i>
<i class="fas fa-database fa-5x"></i>
<i class="fab fa-git fa-5x"></i>
</div>
<p style="color: white; text-align: center; margin-top: 100px;">TEXT </p>
</article>
</section id="projects">
<div class="section__header">
<h1>My projects</h1>
</div>
</section>
</div>
<script src="./scripts/script.js" async defer></script>
</body>
</html>
The main reason for the overlapping elements is because you're floating an element (article.description__text) inside an element (section#whoami) which is not floated.
If you're using floats to layout your page, you need to use float on all your elements. A more modern way to layout your page would be to use flexbox.
Add a , between these section id
#whoami,
#skills,
#projects {
padding-bottom: 50px;
}
and remove float: left; from .description__text class.It will fix the overlapping issue .
https://codesandbox.io/s/hopeful-river-kkkps?file=/style.css
I want to get my social icons to float to the right-hand corner of my footer rather than the left. I'm using float: right; in my css but it's only indenting slightly from the left.
Can anyone help?
footer {
background: #444;
padding: 15px;
}
.copy {
color: #fff;
text-align: center;
font-family:"Exo", sans-serif;
padding-top: 20px;
}
.smed i {
color: #fff;
font-size: 40px;
margin: 10px;
padding-top: 10px;
float: right;
}
.smed i:hover {
color: #ffa500;
}
<footer>
<div class="row text-center">
<div class="col-md-4 smed">
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-medium"></i>
<i class="fab fa-youtube"></i>
</div>
<div class="col-md-4">
<p class="text-light copy">Copyright 2020 Bootstrap4</p>
</div>
</div>
</footer>
Hey ehm I don't know why you asked this, for me it works (at least in the stackoverflow code snippet editor). The icons float to the right.
footer {
background: #444;
padding: 15px;
}
.copy {
color: #fff;
text-align: center;
font-family:"Exo", sans-serif;
padding-top: 20px;
}
.smed i {
color: #fff;
font-size: 40px;
margin: 10px;
padding-top: 10px;
float: right;
}
.smed i:hover {
color: #ffa500;
}
<footer>
<div class="row text-center">
<div class="col-md-4 smed">
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-medium"></i>
<i class="fab fa-youtube"></i>
</div>
<div class="col-md-4">
<p class="text-light copy">Copyright 2020 Bootstrap4</p>
</div>
</div>
</footer>
Can you try this. 'smed' column moved down then increased first column width
<footer>
<div class="row text-center">
<div class="col-md-8">
<p class="text-light copy">Copyright 2020 Bootstrap4</p>
</div>
<div class="col-md-4 smed">
<i class="fab fa-github">1</i>
<i class="fab fa-linkedin">2</i>
<i class="fab fa-medium">3</i>
<i class="fab fa-youtube">4</i>
</div>
</div>
</footer>
If you want the icons on the right you have to reverse the order of the contents of your row.
Fortunately, BS4 has a help class for this flex-row-reverse.
View at Full Page size.
footer {
background: #444;
padding: 15px;
}
.copy {
color: #fff;
text-align: center;
font-family: "Exo", sans-serif;
padding-top: 20px;
}
.smed i {
color: #f00;
//font-size: 40px;
margin: 10px;
padding-top: 10px;
float: right;
}
.smed i:hover {
color: #ffa500;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<footer>
<div class="row text-center flex-row-reverse">
<div class="col-md-4 smed">
<i class="fab fa-github">A</i>
<i class="fab fa-linkedin">B</i>
<i class="fab fa-medium">B</i>
<i class="fab fa-youtube">D</i>
</div>
<div class="col-md-4">
<p class="text-light copy">Copyright 2020 Bootstrap4</p>
</div>
</div>
</footer>
Could anyone help me why the main image, the 1st image of the page, doesn't stretch to the whole page.It only show in the center of the web.I am trying to let the 1st image be the same width of the width of the images below.
Besides I am trying to equal all images in the Portfolio Section to have same height, this one is also not working as I expected. I follow the tutorial from other resources.But I can not figure out what is wrong...
Thanks for any help i really appreciated it. Thanks a million times~~!
html {
box-sizing: border-box;
}
body{
margin: 0;
}
/*Logo style*/
.logo-section .Logo {
width: 150px;
height: 100px;
}
img {
border-radius: 2px;
width: 100%;
height: auto;
vertical-align: middle;
}
.img-responsive {
max-width: 100%;
heigh:auto;
}
/*Main pic style*/
.grid{
display: flex;
}
*, *:before, *:after {
box-sizing: border-box;
}
.main-container{
margin: 0 auto;
padding: 5%;
width: 75%;
}
/**When viewpoint is below 600px Main img is gone**/
#media screen and (max-width: 600px)
.Row{
display: none;
}
/*Project photoes*/
.img1 { flex: 1.2944; }
.img2 { flex: 1.7777778; }
.img3 { flex: 1.59817; }
.img4 { flex: 1.59817; }
.img5 { flex: 1.59817; }
.img6 { flex: 1.59817; }
.flex-item{
margin: 1rem;
}
.photo-grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
#media screen and (min-width: 1000px) {
.flex-item {
width: 30%;
}
}
.img-center {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.input_inf {
padding: 8px;
display: block;
border: none;
border: 1px solid #ccc!important;
width: 100%;
}
.input-padding {
padding-top: 16px!important;
padding-bottom: 16px!important;
}
.love{
color:red;
}
h1,h2,h3,h4,h5,h6 {
font-family: "Montserrat", sans-serif
}
.text-color{
color:#757575!important}
.bar-color, .w3-hover-black:hover {
color: #fff!important;
background-color: #000!important;
}
.animate-right{
animation: toright 0.5s;
}
#keyframes toright {
0% {
right: -200px;
opacity: 0;
}
100% {
right: 0;
opacity: 1;
}
}
nav{
display:block;
}
.sidebar {
height: 100%;
background-color: #fff;
position: fixed!important;
display:none;
padding-top:150px;
z-index:2;
right:0;
}
.bar-block .bar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: center;
border: none;
outline: none;
white-space: normal;
float: none;
}
html, body {
font-size: 18px;
line-height: 1.2;
}
.Project{
text-align:left;
}
.icon-size {
font-size: 35px!important;
}
.icon-position{
position: fixed;
width: 100%;
}
.button {
border: 10px;
display: inline-block;
padding: 10px 16px;
vertical-align: middle;
text-decoration: none;
background-color: inherit;
width:auto;
right:0;
}
.center-position{
text-align: center!important;
}
h2 {
font-size: 30px;
}
.footer {
color: #747704;
font-size: 24px;
margin-top: 20px;
margin-bottom: 10px;
font-weight: 500;
line-height: 1.2;
text-align: center!important;
}
hr {
border: 10;
border-top: 1px solid #eee;
margin: 20px 0;
box-sizing: content-box;
overflow: visible;
display: block;
}
.large-font {
font-size: 48px!important;
}
.close-button-position {
position: absolute;
right: 0;
top: 0;
}
.MineName {
font-size: 64px!important;
}
h3 {
font-size: 24px;
}
.Contact-Section{
margin-bottom:64px;
}
.pull{
text-align: right;
}
<!DOCTYPE html>
<html>
<title>Portfolio</title>
<!-- Meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Boyan Liu - Front End Developer">
<meta name="keywords" content="portfolio, Boyan Liu, HTML, CSS,JavaScript, front-end">
<meta name="author" content="Boyan Liu">
<!--Font Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Font-->
<!--CSS-->
<body>
<div class="header-container">
<div class="sidebar-item">
<!-- Hidden Sidebar (reveals when clicked on menu icon)-->
<nav class="sidebar bar-color animate-right icon-size"id="mySidebar">
<a href="javascript:void(0)" onclick="closeNav()" class="button bar-color large-font close-button-position" style="padding:0 12px;">
<i class="fa fa-remove"></i>
</a>
<div class="bar-block center">
Home
Project
About
Contact
</div>
</nav>
<!-- Menu icon to open sidebar -->
<span class="button icon-position icon-size text-color " onclick="openNav()"><i class="fa fa-bars"></i></span>
</div>
<!--Logo-section-->
<div class="Logo-container">
<div class="logo-section">
<img class="Logo" src="https://cdn-images-1.medium.com/max/1600/1*M91VPyBBkZ1sFT4Yv43LWQ.png"; alt="Udacity Logo">
</div>
</div>
<!--End of header section-->
</div>
<!-- Main Content -->
<div class="Title-container">
<!-- Main Title -->
<div class="Main_Title">
<header class="center-position" id="home">
<h1 class="MineName "><b>Boyan Liu</b></h1>
<p>Front-End Ninja.</p>
<button class="button">
<i class="fa fa-download"></i> Download Resume</button>
</header>
</div>
<!--End of title Container-->
</div>
<!--Main Picture-->
<div class="main-container">
<div class="grid">
<div class="Row">
<img src="http://www.wallpaperup.com/uploads/wallpapers/2012/12/22/26202/big_thumb_efa8696da34157aaf43d587d1f6b8299.jpg"alt="main image">
</div>
</div>
</div>
<!-- Portfolio Section -->
<h2 class="Project text-color">Udacity Project</h2>
<hr>
<div class="portfolio" id="Project">
<!-- Future Project Part-->
<div class="photo-grid-container">
<div class='photo-grid'>
<div class="flex-item">
<img class="img-responsive img-center img1" src="https://raw.githubusercontent.com/Agent5/udacity-frontend-project1/master/images/p1.jpg"; alt="Build a portfolio" >
<h3 class="footer">Boyan WIKI</h3>
</div>
<div class="flex-item">
<img class="img-responsive img-center img2" src="https://i.ytimg.com/vi/33F1s0iDlEk/maxresdefault.jpg"; alt="Interactive resume">
<h3 class="footer">Interactive resume</h3>
</div>
<div class="flex-item">
<img class="img-responsive img-center img3" src="http://jshanks24.github.io/Udacity-Portfolio-Site/images/arcade-game_small.jpg"; alt="Classic arcade game clone" >
<h3 class="footer">Classic arcade game clone</h3>
</div>
<div class="flex-item">
<img class="img-responsive img-center img4" src="http://jshanks24.github.io/Udacity-Portfolio-Site/images/website-optimization_pizza_small.jpg"; alt="Website Optimization" >
<h3 class="footer">Website Optimization</h3>
</div>
<div class="flex-item">
<img class="img-responsive img-center img5" src="http://jshanks24.github.io/Udacity-Portfolio-Site/images/neighborhood-map_small.jpg"; alt="Neighborhood Map">
<h3 class="footer">Neighborhood Map</h3>
</div>
<div class="flex-item">
<img class="img-responsive img-center img6" src="http://jshanks24.github.io/Udacity-Portfolio-Site/images/feedreader-testing_small.jpg"; alt="Feedreader Testing">
<h3 class="footer">Feedreader Testing</h3>
</div>
</div>
</div>
<!-- End Project Section -->
<!-- About Section -->
<div class="About-Section text-color" id="about">
<h2>About</h2>
<hr>
<!--summary-->
<div class="Summary">
<p>Hi, my name is Boyan Liu. I am a front-end web developer. I am taking Front-end Nanodegree at Udacity. This is great experience and I have learned so many more skills to add to my skillset so far.I love learning about the latest technologies and am always aiming to improve my skills
This web page is the first Project in the Udacity Front-end Nanodegree.
is a refactored version of the first project in the Udacity Front-end Nanodegree.
</p>
</div>
<!--My skill set-->
<div class="Skill-Set">
<h3>My Skills</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Java</li>
</ul>
</div>
<!-- End About Section -->
</div>
<!-- Contact Section -->
<div class="Contact-Section text-color" id="contact">
<h2>Contact Me</h2>
<hr >
<div class="Contact-Icons">
<p><i class="fa fa-map-marker icon-size "></i> College Park, US</p>
<p><i class="fa fa-phone icon-size "></i> Phone: +2068224758</p>
<p><i class="fa fa-envelope icon-size "> </i> Email: lbyybl1996#gmail.com</p>
</div>
<!-- Google Map -->
<div id="googleMap" class="Myaddress" style="background-color: grey; width:100%;height:300px;margin:50px 0;"></div>
<!-- Get In Touch -->
<div>
<p>Lets get in touch. Send me a message:</p>
<form action="/action_page.php" target="_blank">
<p><input class="input_inf input-padding " type="text" placeholder="Name" required name="Name"></p>
<p><input class="input_inf input-padding " type="text" placeholder="Email" required name="Email"></p>
<p><input class="input_inf input-padding " type="text" placeholder="Subject" required name="Subject"></p>
<p><input class="input_inf input-padding " type="text" placeholder="Message" required name="Message"></p>
<p>
<button class="w3-button w3-light-grey w3-padding-large" type="submit">
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</p>
</form>
</div>
<!-- End Contact Section -->
</div>
</div>
<!-- Footer -->
<div class="footer2">
<footer class="container center-position">
<i class="fa fa-facebook-official "></i>
<i class="fa fa-instagram "></i>
<i class="fa fa-snapchat "></i>
<i class="fa fa-pinterest-p "></i>
<i class="fa fa-twitter "></i>
<i class="fa fa-linkedin "></i>
<p class="pull">Back to top</p>
<p>Made with <span class="love">♥</span> by Boyan Liu</p>
<!-- End footer -->
</footer>
<!-- END PAGE CONTENT -->
</div>
<!-- Add Google Maps -->
<script>
function myMap()
{
myCenter=new google.maps.LatLng(39.005142, -76.930662);
var mapOptions= {
center:myCenter,
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
//Put a marker on the map
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
// Open and close sidebar
function openNav() {
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
document.getElementById("mySidebar").style.width = "30%";
document.getElementById("mySidebar").style.display = "block";
} else {
/* the viewport is less than 400 pixels wide */
document.getElementById("mySidebar").style.width = "60%";
document.getElementById("mySidebar").style.display = "block";
}
}
function closeNav() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
</html>
Unless I missed it, it looks like you have specified a width for the image. You could either put width="100%" as an attribute for the image, or give the image a class of say .full-width and set the width to 100% from there.
I would recommend the first, because then you can add that class to any element and it will cause it to resize.
<style>
.full-width {
width:100%;
}
</style>
<div class="main-container">
<div class="grid">
<div class="Row">
<img class="full-width"src="http://www.wallpaperup.com/uploads/wallpapers/2012/12/22/26202/big_thumb_efa8696da34157aaf43d587d1f6b8299.jpg"alt="main image">
</div>
</div>
</div>
I have a simple bootstrap grid with a row displaying some text in one column and a stacked font-awesome icon set in another column. The issue I'm having is the icon-set is not vertically aligned in the middle of the div, as the text is. As you can see the icon is more aligned to the top of the div. Is there a way to center align this?
I've created a fiddle here and re-posted the code below:
html:
<div class="container-fluid">
<div class="row posted-content">
<div class="col-md-10">
<h4 class="text-primary pull-left">Hey, this is some text</h4>
</div>
<div class="col-md-2 comment-count pull-right">
<a class="fa-stack comment-action">
<i class="fa fa-comment-o fa-fw fa-stack-2x"></i>
<i class="fa fa-stack-1x">5</i>
</a>
</div>
</div>
</div>
css:
.posted-content {
border-radius: 4px;
border-color: #e7e7e7;
border: 1px solid rgba(0, 0, 0, 0.1);
max-width: 1140px;
background-color: #f8f8f8;
margin-bottom: 0px;
vertical-align: middle;
}
I've tried playing with vertical-align but to no avail. Any ideas appreciated.
Try this
<div class="container-fluid">
<div class="row posted-content centered-vertically">
<div class="col-md-10">
<h4 class="text-primary pull-left">Hey, this is some text ghssd fjkflsdj sdfkkl;asdk</h4>
</div>
<div class="col-md-2 comment-count pull-right">
<a class="fa-stack comment-action">
<i class="fa fa-comment-o fa-fw fa-stack-2x"></i>
<i class="fa fa-stack-1x">5</i>
</a>
</div>
</div>
</div>
CSS
.container-fluid .centered-vertically{
display:flex;
align-items:center;
}
Fiddle here
Here is a little Workaround with flexbox:
.posted-content {
border-radius: 4px;
border-color: #e7e7e7;
border: 1px solid rgba(0, 0, 0, 0.1);
max-width: 1140px;
background-color: #f8f8f8;
margin-bottom: 0px;
display:flex;
align-items: center;
justify-content: space-between;
}
.posted-content:before,.posted-content:after{
display:none;
}
.comment-action {
color: #79858A;
}
.comment-count>a {
text-decoration: none;
}
.comment-count>a:hover {
color: #d9534f !important;
}
JSFiddle