How can I add this icon from fontawesome and put it over this picture?
I want it to be aligned in the center of the picture.
<i class="fas fa-play-circle"></i>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="d-flex border-bottom mb-1 mt-3">
<!-- Media -->
<ul class="list-unstyled video-list-thumbs row">
<li class="col-lg-3 col-sm-4 col-xs-6">
<a href="#">
<img src="https://curso-gratis.com.mx/wp-content/uploads/2021/03/logo-bootstrap.png" alt="C" class="img-responsive" height="130px" />
</a>
</li>
</ul>
<!-- Content -->
<div class="ml-2">
<h5 class="mb-0 ml-2">
Lesson 1 : Lorem ipsum dolor sit.
</h5>
<span class="ms-1 fs-6 text-muted h6 ml-3">Duration : 15min</span>
<p class="ml-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, ratione rem vitae officia quo laudantium nemo molestiae! Esse, sed ipsam.</p>
</div>
</div>
</body>
</html>
Problem is solved and responsive Design now is properly achieved.
You just update your CSS with the following Code
.img-box{
position: relative;
min-width: 100%;
height: 100%;
display: block;
}
.icon-box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
min-height: 100%;
}
.icon-box i{
font-size: 29px;
color: #fff;
}
#media(max-width: 767px){
.main-box {
flex-direction: column;
align-items: center;
}
}
And update your HTML with following
<div class="d-flex border-bottom mb-1 mt-3 main-box">
<!-- Media -->
<ul class="list-unstyled video-list-thumbs row">
<li>
<a href="#" class="img-box">
<div class="icon-box">
<i class="fas fa-play-circle"></i>
</div>
<img src="https://curso-gratis.com.mx/wp-content/uploads/2021/03/logo-bootstrap.png" alt="C" class="img-responsive" height="130px" />
</a>
</li>
</ul>
<!-- Content -->
<div class="ml-2">
<h5 class="mb-0 ml-2">
Lesson 1 : Lorem ipsum dolor sit.
</h5>
<span class="ms-1 fs-6 text-muted h6 ml-3">Duration : 15min</span>
<p class="ml-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, ratione rem vitae officia quo laudantium nemo molestiae! Esse, sed ipsam.</p>
</div>
</div>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Abhijeet John Kujur.
</div>
Related
I'm trying to layer the top row of cards on top of the header using z-index on a project using Materialize CSS. Since the cards are now using relative positioning, it causes some of them to move when the card-action is hovered upon (the result is less visible on mobile view since there's only one card per row). I also didn't intend on the card-action text moving to the center when hovered, though I'm okay with that effect. I've tried using absolute positioning as well as changing which element the positioning is applied to. How can I prevent the cards from shifting and still use z-index? Here is my code and link to my (codepen):
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
:root {
--primary-color: #c31432;
--primary-text-color: rgba(0,0,0,0.5);
--primary-text: "Open Sans", sans-serif;
}
* {
font-family: "Open Sans", sans-serif;
font-weight: 400;
}
#works-header {
position: absolute;
height: 500px;
width: 100vw;
z-index: 10;
}
#works-header h1 {
font-size: 3rem;
letter-spacing: 1px;
margin: 0 auto;
}
#cards {
position: relative;
top: 400px;
z-index: 1000;
}
.card-image {
cursor: pointer;
transition: all .3s ease;
}
.card-image:hover {
border: 3px solid var(--primary-color);
opacity: 0.85;
}
.card-image:hover .card-title {
display: none;
}
.card-action {
width: 50%;
cursor: pointer;
font-size: 1.2rem;
transition: all .3s ease;
}
.card-action:hover {
width: 100%;
position: absolute; /* this prevents cards from shifting due to relative positioning on the card element */
opacity: 0.7;
border-bottom: 2px solid var(--primary-color);
}
.card-tags {
display: none;
}
.card-image:hover .card-tags {
display: block;
position: absolute;
left: 1rem;
bottom: 2rem;
letter-spacing: 2px;
font-weight: 300;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<!-- Todos: fix all cards aligned on the right side (card-action does not work properly) -->
<section class="center" id="works">
<div id="works-header" class="black valign-wrapper">
<h1 class="white-text center-align">Check out some of my latest projects</h1>
<p></p>
</div>
<div class="container row" id="cards">
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
</div>
</div>
</section>
One solution is to add a border to card-image, so that you are transitioning just the opacity and color, and not the border size (which in turn recalculates the size of the image and causes the flicker). It's a lot for the browser to process all at once.
.card-image {
cursor: pointer;
transition: all .3s ease;
border: 3px solid black;
}
Codepen.
EDIT:
Sorry, I realised there were two issues.
Ok so you don't need absolute positioning on the header - absolute takes items out of the flow of the page. No need to do that here. Take off the relative from the cards and use a negative margin:
#cards {
top: 400px;
z-index: 1000;
margin-top: -100px;
}
I've removed the absolute positioning from the hover as it's not a good idea. Absolute positioning comes into it's own when you need to finely control an elements positioning. No need for that here. I've also taken the 50% width off and added a default border to prevent flicker on the card action.
The main reason it's happening - because of the border on hover. If you really need this look - add empty div inside card-image and add inset box-shadow for it.
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
<div class="hover-shadow"></div>
</div>
and for CSS:
.card-image .hover-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card-image:hover .hover-shadow {
box-shadow: inset 0 0 0 2px (--primary-color);
}
Full example at codepen
I am trying to create a responsive cards set using bootstrap. The code of the cards is as follows:
<div class="col-xl-4 col-md-6 col-sm-6 p-2">
<div class="card shadow" style="width: 16rem;">
<div class="inner">
<img class="card-img-top" src="images/1.jpeg" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Location 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Beatae maxime eaque eligendi fugit dolores odit. Corrupti repellat aperiam.
</p>
<div class="justify-content-between">
<!-- Learn more -->
<div class="ml-2">
<i class="fas fa-video fa-lg"></i>
<i class="fas fa-restroom fa-lg ml-2"></i>
<span class="ml-5">
<i class="fas fa-bolt text-warning fa-lg">10</i>
<i class="fas fa-bolt text-success fa-lg ml-2">8</i>
</span>
</div>
</div>
</div>
</div>
</div>
The extra css applied to this is:
.inner {
overflow:hidden;
}
.inner img {
transition: all 1.5s ease;
}
.inner img:hover{
transform:scale(1.5);
}
.card-img-top {
width: 100%;
height: 25vh;
object-fit: cover;
}
What I am trying to achieve is, whenever hovered over image inside the card, it will scale up.
This works fine but whenever I go on reducing the window size, one card goes below the other.
I cannot understand why this is happening.
Card overlaps another card. so apply z-idex:1000. its work.
.card{
z-index: 1000;
}
.inner {
overflow: hidden;
}
.inner img {
transition: all 1.5s ease;
}
.inner img:hover {
transform: scale(1.5);
}
.card-img-top {
width: 100%;
height: 25vh;
object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<div class="row">
<div class="col-xl-4 col-md-4 col-sm-6 p-2">
<div class="card shadow" style="width: 16rem;">
<div class="inner">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRQ6mhz8QnD2r1COMuWG4RZnrAzrgFwQHvC7QbIC3cSL6pbYUpL&usqp=CAU" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Location 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Beatae maxime eaque eligendi fugit dolores odit. Corrupti repellat aperiam.
</p>
<div class="justify-content-between">
<!-- Learn more -->
<div class="ml-2">
<i class="fas fa-video fa-lg"></i>
<i class="fas fa-restroom fa-lg ml-2"></i>
<span class="ml-5">
<i class="fas fa-bolt text-warning fa-lg">10</i>
<i class="fas fa-bolt text-success fa-lg ml-2">8</i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-4 col-sm-6 p-2">
<div class="card shadow" style="width: 16rem;">
<div class="inner">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRQ6mhz8QnD2r1COMuWG4RZnrAzrgFwQHvC7QbIC3cSL6pbYUpL&usqp=CAU" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Location 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Beatae maxime eaque eligendi fugit dolores odit. Corrupti repellat aperiam.
</p>
<div class="justify-content-between">
<!-- Learn more -->
<div class="ml-2">
<i class="fas fa-video fa-lg"></i>
<i class="fas fa-restroom fa-lg ml-2"></i>
<span class="ml-5">
<i class="fas fa-bolt text-warning fa-lg">10</i>
<i class="fas fa-bolt text-success fa-lg ml-2">8</i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
-> how to set column in responsive view this type of structure. i want one by one column i have attachment screenshot what i want in bootstrap 4 for ipad view. i want one column than second column.
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i|Rubik:300,300i,400,400i,500,500i,700,700i,900,900i');[![enter image description here][1]][1]
body {
font-size: 15px;
line-height: 28px;
font-family: 'Rubik', sans-serif;
font-weight: 400;
}
.video-thumb .video-icon {
width: 35px;
height: 35px;
background-color: rgba(0,0,0,.9);
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
.thumbnail-main, .video-content {
margin-bottom: 20px;
}
img {
max-width: 100%;
}
.inner-content span {
display: block;
margin-bottom: 10px;
text-transform: uppercase;
font-size: 10px;
font-weight: 500;
letter-spacing: 1px;
line-height: 12px;
}
.inner-content a.link {
color: #208385;
}
h5 {
font-size: 14px;
line-height: 22px;
font-weight: 700;
}
section {
padding: 100px 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-md-4 thumbnail-main">
<a href="https://www.google.co.in/">
<div class="postion-relative">
<img src="http://placekitten.com/1000/500" alt="">
</div>
</a>
</div>
<div class="col-md-8 video-content inner-content">
<span class="date">10 Oct 2018</span>
<span class="cat-tag">
<a class="link" href="https://www.google.co.in/">Breast</a>
</span>
<a href="https://www.google.co.in/">
<h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
</a>
</div>
<div class="col-md-4 thumbnail-main">
<a href="https://www.google.co.in/">
<div class="postion-relative">
<img src="http://placekitten.com/1000/500" alt="">
</div>
</a>
</div>
<div class="col-md-8 video-content inner-content">
<span class="date">10 Oct 2018</span>
<span class="cat-tag">
<a class="link" href="https://www.google.co.in/">Breast</a>
</span>
<a href="https://www.google.co.in/">
<h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
</a>
</div>
</div>
</div>
</section>
Bootstrap columns can only have 12 columns in one row, in your example you have 4 div's with 4, 8, 4, 8 columns.
What you need to do is the following:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
<div class="container">
<div class="row align-items-center">
<div class="row col-md-4 col-lg-12">
<div class="col-lg-4 thumbnail-main">
<a href="https://www.google.co.in/">
<div class="postion-relative">
<img src="http://placekitten.com/1000/500" alt="">
</div>
</a>
</div>
<div class="col-lg-8 video-content inner-content">
<span class="date">10 Oct 2018</span>
<span class="cat-tag">
<a class="link" href="https://www.google.co.in/">Breast</a>
</span>
<a href="https://www.google.co.in/">
<h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
</a>
</div>
</div>
<div class="row col-md-4 col-lg-12">
<div class="col-lg-4 thumbnail-main">
<a href="https://www.google.co.in/">
<div class="postion-relative">
<img src="http://placekitten.com/1000/500" alt="">
</div>
</a>
</div>
<div class="col-lg-8 video-content inner-content">
<span class="date">10 Oct 2018</span>
<span class="cat-tag">
<a class="link" href="https://www.google.co.in/">Breast</a>
</span>
<a href="https://www.google.co.in/">
<h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
</a>
</div>
</div>
</div>
</div>
</section>
I surrounded the cards within a div, that contains a row with col-md-4 and col-lg-12. This will show a card at tablet and smaller, but if larger then a tablet it will show it in a row. Don't know if this is what you mean, i hope it helps :)!
I'm modifying a Bootstrap template thats using #media(max-width) queries. The background images looks fine in desktop responsive view. But the image is cut off horizontally (left and right) for mobile responsive view as seen below. It looks like even when viewed in responsive design mode or on an iPhone, the desktop media query is still used.
The desktop media query being used for both desktop and mobile is
header.carousel {
height: 80%;
}
I tried changing the mobile media query with !important but it doesn't appear to force the use of this media query.
#media(max-width:767px) {
.img-portfolio {
margin-bottom: 15px;
}
header.carousel .carousel {
height: 60%!important;
}
}
I can change the desktop media query height to a lower value that will look correctly on mobile, but then the desktop view will get chopped vertically (top and bottom).
Anyone have a solution?
The full code is below
/*!
* Start Bootstrap - Modern Business (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
/* Global Styles */
html,
body {
height: 100%;
}
body {
padding-top: 50px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
/*.navbar-brand.img {
max-width: 100%;
max-height: 100%;
}*/
/*a.dropdown-toggle*/
.navbar-nav>li>a {
padding-top: 25px;
padding-bottom: 25px;
font-size: 16px;
}
/*.navbar-nav>li>a {
line-height: 35px;
}*/
/*a.dropdown-toggle {
font-size: 16px;
}*/
img.logo {
max-width: 100%;
max-height: 100%;
}
a.navbar-brand {
height: 70px;
/*line-height: 35px;*/
}
/*a.navbar-brand.title {
font-size: 20px;
}*/
.img-portfolio {
margin-bottom: 30px;
}
.img-hover:hover {
opacity: 0.8;
}
/* Home Page Carousel */
header.carousel {
/*height: 50%;*/
height: 80%;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 100%;
}
header.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
/* 404 Page Styles */
.error-404 {
font-size: 100px;
}
/* Pricing Page Styles */
.price {
display: block;
font-size: 50px;
line-height: 50px;
}
.price sup {
top: -20px;
left: 2px;
font-size: 20px;
}
.period {
display: block;
font-style: italic;
}
/* Footer Styles */
footer {
margin: 50px 0;
}
/* Responsive Styles */
#media(max-width:991px) {
.customer-img,
.img-related {
margin-bottom: 30px;
}
}
#media(max-width:767px) {
.img-portfolio {
margin-bottom: 15px;
}
header.carousel .carousel {
height: 60%!important;
}
}
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Modern Business - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<!--<link href="css/modern-business.css" rel="stylesheet">-->
<link href="styles/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<!--<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="index.html">Super Service Heating & Cooling</a>-->
<!--<img src="images/logo-small.png">-->
<!--<a class="navbar-brand" href="/"><img src="images/logo-small.png" class="logo"></a>-->
<!--<a class="navbar-brand title" href="/">Super Service Heating & Cooling</a>-->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<!--About-->
<!--About-->
<!--Air Conditioning-->
Air Conditioning <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Air Conditioning Repair
</li>
<li>
Air Conditioning Installation
</li>
</ul>
</li>
<li>
<!--Services-->
<!--Heating-->
Heating <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Heating Repair
</li>
<li>
Heating Installation
</li>
</ul>
</li>
<li>
<!--Services-->
<!--Heating-->
Ventilation <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Ventilation Repair
</li>
<li>
Ventilation Installation
</li>
</ul>
</li>
<li>
<!--Services-->
<!--Heating-->
Maintenance <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Check-Up
</li>
<li>
Tune-Up
</li>
<li>
Re-Condition
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<!--<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>-->
<div class="fill" style="background-image:url('https://static.wixstatic.com/media/fe503bcecec148e98b8264560b170aa9.jpg/v1/fill/w_1265,h_525,al_c,q_85,usm_0.66_1.00_0.01/fe503bcecec148e98b8264560b170aa9.jpg');"></div>
<div class="carousel-caption">
<!--<h2>Caption 1</h2>-->
<h2>Heating</h2>
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!--<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>-->
<div class="fill" style="background-image:url('https://static.wixstatic.com/media/7aa29e_fe789a02d347491da0897a536f102e31~mv2_d_2800_1867_s_2.jpg/v1/fill/w_1265,h_515,al_c,q_85,usm_0.66_1.00_0.01/7aa29e_fe789a02d347491da0897a536f102e31~mv2_d_2800_1867_s_2.jpg');"></div>
<div class="carousel-caption">
<h2>Air Conditioning</h2>
</div>
</div>
<div class="item">
<!--<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>-->
<div class="fill" style="background-image:url('https://static.wixstatic.com/media/7aa29e_84f4f5aed8b241ec9a3b88b089f1313e~mv2_d_2800_1869_s_2.jpg/v1/fill/w_1265,h_527,al_c,q_85,usm_0.66_1.00_0.01/7aa29e_84f4f5aed8b241ec9a3b88b089f1313e~mv2_d_2800_1869_s_2.jpg');"></div>
<div class="carousel-caption">
<h2>Maintenance</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
<!-- Page Content -->
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-12">
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-check"></i> Bootstrap v3.3.7</h4>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
Learn More
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-gift"></i> Free & Open Source</h4>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
Learn More
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-compass"></i> Easy to Use</h4>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
Learn More
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Portfolio Section -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Portfolio Heading</h2>
</div>
<div class="col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
</div>
<!-- /.row -->
<!-- Features Section -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Modern Business Features</h2>
</div>
<div class="col-md-6">
<p>The Modern Business template by Start Bootstrap includes:</p>
<ul>
<li><strong>Bootstrap v3.3.7</strong>
</li>
<li>jQuery v1.11.1</li>
<li>Font Awesome v4.2.0</li>
<li>Working PHP contact form with validation</li>
<li>Unstyled page elements for easy customization</li>
<li>17 HTML pages</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde.
</p>
</div>
<div class="col-md-6">
<img class="img-responsive" src="http://placehold.it/700x450" alt="">
</div>
</div>
<!-- /.row -->
<hr>
<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, expedita, saepe, vero rerum deleniti beatae veniam harum neque nemo praesentium cum alias asperiores commodi.</p>
</div>
<div class="col-md-4">
<a class="btn btn-lg btn-default btn-block" href="#">Call to Action</a>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Company Name
<script>
document.write(new Date().getFullYear())
</script>
</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<!--<script src="js/jquery.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>
your #media(max-width:767px) is wrong
#media(max-width:767px) {
.img-portfolio {
margin-bottom: 15px;
}
header.carousel .carousel { // header.carousel .fill is necessary
height: 60%!important;
}
}
I think this helps :) And note: if you adjust the height think then also to the wide
Try using vh instead of percents.
height: 80vh;
I made this pen, so you can see how to use vh unit: https://codepen.io/anon/pen/KqvxgE
vh - calculates height based on your viewport, so the layout should look the same on different viewports - screen resolutions.
More about units in css: https://www.w3schools.com/cssref/css_units.asp
I have a problem with aligning icons inside the sidebar. I want to have a few social icons in right-bottom corner of a sidebar.I tried using margins but it looks horrible and ugly.
Here's an example in JSBin (please resize the window to at least 1000px).
html, body, .container-fluid, .row {
height: 100%;
}
body {
background-color: #F2F0F1;
}
.sidebar {
background-color: tomato;
}
#media (min-width: 992px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: tomato;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
}
ul li {
margin: 0 auto;
line-height: 50px;
list-style: none;
text-align: right;
margin-right: 20px;
}
ul li a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
a:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.4);
padding: 4px;
color: tomato;
}
.hi {
margin-right: 20px;
text-align: right;
color: rgba(0, 0, 0, 0.4);
}
.content {
padding: 2% 4% 2% 4%;
color: rgba(0, 0, 0, 0.4);
background-color: #F2F0F1;
}
#fixedbutton {
position: fixed;
top: 0px;
right: 0px;
}
.sidebar-bottom-wrap {
position: absolute;
bottom: 60px;
right: 40px;
max-width: 200px;
}
.icons-sidebar-unit {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
vertical-align: baseline;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRZEMO PORTFOLIO</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- SIDEBAR -->
<div class="container">
<div class="row">
<div class="col-md-3 sidebar"><div class="foto">
<img src="pic.png" class=" img-responsive img-circle " alt="pic">
</div>
<h3 class="hi">Hi! I am <strong>Mike</strong> ,a front-end developer.</h2>
<!-- MENU -->
<ul>
<li>ABOUT</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
<!-- footer ICONS -->
<footer>
<!--Social icons-->
<div class="social-icons-sidebar">
<a title="Follow us" href="https://twitter.com/uiueux" class="icons-sidebar-unit">
<i class="fa fa-twitter-square"></i>
</a>
<a title="Follow us" href="https://www.facebook.com/Uiueux/" class="icons-sidebar-unit">
<i class="fa fa-facebook-square"></i>
</a>
<a title="" href="#" class="icons-sidebar-unit">
<i class="fa fa-google-plus-square"></i>
</a>
<a title="" href="https://www.youtube.com/playlist?list=PLJkj39CuqdNz7WTWdHTbSrOvQL03sIZa-" class="icons-sidebar-unit">
<i class="fa fa-youtube-square"></i>
</a>
</div>
<div class="copyright">
Copyright © 2017. Designed by
<a href=http://www.uiueux.com>wwwS</a>.
</div><!--End copyright-->
<!--
<i class="fa fa-linkedin A " aria-hidden="true"></i>
<i class="fa fa-github" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
-->
</div>
</footer>
<!-- MAIN -->
<div class="col-md-9 col-md-offset-3 content">
<h2 id="about">ABOUT ME</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
<div class="container-fluid">
<h2 id="projects">RECENT PROJECTS</h2>
<div class="row">
<div class="col-md-9">
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="1.png" alt="" class="img-responsive img-thumbnail">
</div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="2.png" alt="" class="img-responsive img-thumbnail">
</div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="3.png" alt="" class="img-responsive img-thumbnail">
</div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="4.png" alt="" class="img-responsive img-thumbnail">
</div>
</div>
</div>
</div>
<br>
SKILLZ:<br>
HTML 5 - PRO <br>
CSS 3 - PRO <br>
JS - NOOB <br>
JQUERY - NOOB<br>
SASS - MAD <br>
GRUNT - GOD
<hr>
<h2 id="contact">CONTACT</h2>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input id="" name="" type="text" placeholder="name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input id="" name="" type="text" placeholder="email" class="form-control input-md">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<textarea class="form-control" id="" name="">message</textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-12 control-label" for="singlebutton"></label>
<div class="col-md-12">
<button id="singlebutton" name="singlebutton" class="btn btn-default">send message</button>
</div>
</div>
</fieldset>
</form>
<img src="qrcode1.png" class="img-responsive center-block" alt="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp eu fuglorem Lorem ipsuat nulla pariatur. Exceeu fugiat it in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui r sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The easiest way is probably to absolutely position them .social-icons-sidebar { position: absolute; bottom: 0; right: 0; } https://jsbin.com/petixugodu/1/edit?html,css,output
You could also use flexbox. Make the sidebar a column flex container, set the footer to flex-grow: 1 so that it extends to the bottom of the sidebar, put the social icons at the bottom by using margin-top: auto and order: 1 then align them to the right with text-align: right or align-self: flex-end https://jsbin.com/tukiqonase/edit?html,css,output
To align your icons to the right, try:
.icons-sidebar-unit {
float: right;
}
Also, while looking at your code, I noticed you had a height / width set to 30px on your icon units. If this was to increase the size of the icons themselves, try:
.icons-sidebar-unit {
font-size: 30px;
}
A lot of people get confused on this one because it seems like icons should be styled like images, but they are actually styled as fonts.