I am developing a website and I dont know why, my left divs with ease-out blinks always, but the right not! I dont want them to blink and I cant resolve this insue.
I saw, that this changes with the page size, like on full screen happens, when we reduce a little bit its fine, and reduce more happens again! I think its a bug.
Code from divs:
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop-code"></i>
</div>
<div class="service-text">
<h3>Web Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
.service {
position: relative;
width: 100%;
padding: 45px 0 15px 0;
}
.service .service-item {
position: relative;
margin-bottom: 30px;
display: flex;
align-items: center;
box-shadow: inset 0 0 0 0 transparent;
transition: ease-out 0.5s;
}
.service .service-item:hover {
box-shadow: inset 800px 0 0 0 #EF233C;
}
.service .service-icon {
position: relative;
width: 150px;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #EF233C;
background: #ffffff;
}
.service .service-icon i {
position: relative;
font-size: 60px;
color: #EF233C;
transition: .3s;
}
.service .service-item:hover i {
font-size: 75px;
}
.service .service-text {
position: relative;
width: calc(100% - 120px);
padding: 0 30px;
}
.service .service-text h3 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
transition: 1s;
}
.service .service-text p {
margin: 0;
font-size: 16px;
transition: 1s;
}
.service .service-item:hover .service-text h3,
.service .service-item:hover .service-text p {
color: #ffffff;
}
#media (max-width: 575.98px) {
.service .service-text h3 {
font-size: 16px;
margin-bottom: 5px;
}
.service .service-text p {
font-size: 14px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DevFolio - Developer Portfolio Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Free Website Template" name="keywords">
<meta content="Free Website Template" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<!-- CSS Libraries -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<!-- Service Start -->
<div class="service" id="service">
<div class="container">
<div class="section-header text-center wow zoomIn" data-wow-delay="0.1s">
<p>What I do</p>
<h2>Awesome Quality Services</h2>
</div>
<div class="row">
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.0s">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop"></i>
</div>
<div class="service-text">
<h3>Web Design</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop-code"></i>
</div>
<div class="service-text">
<h3>Web Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.4s">
<div class="service-item">
<div class="service-icon">
<i class="fab fa-android"></i>
</div>
<div class="service-text">
<h3>Apps Design</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.6s">
<div class="service-item">
<div class="service-icon">
<i class="fab fa-apple"></i>
</div>
<div class="service-text">
<h3>Apps Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Service End -->
</body>
</html>
There you have my code html just with services and css! Now all are blinking when they are under each other! And I dont know why
Gif of what happens:
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Jost:wght#300;400;500;600;700;800&display=swap');
#import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
#categories{
text-align: center;
}
#categories h1{
margin-bottom:5rem;
}
.category-blocks h3{
font-size: x-large;
margin: 1rem 0;
}
.category-blocks{
background-color: lightgreen;}
.category-blocks p{
width: 80%;
margin: 1rem 0;
margin: auto;
text-align: justify;
margin-bottom: 1rem;
}
.category-blocks .btn-primary{
border-radius: 2rem;
background-color: transparent;
border:2px solid #03bf72;
padding: 0.7rem 1.8rem;
color: #03bf72;
}
.category-blocks .fas{
color: #03bf72;
font-size: 1.5rem;
}
</style>
<body>
<section id="categories">
<div class="row">
<div class="col-md-4 category-blocks">
<div class="col-md-12">
<i class="fas fa-bullhorn"></i>
<h3>Effective Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
<button class="btn btn-primary">Learn more</button>
</div>
</div>
<div class="col-md-4 category-blocks">
<div class="col-md-12">
<i class="fas fa-bullhorn"></i>
<h3>Effective Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
<button class="btn btn-primary">Learn more</button>
</div>
</div>
<div class="col-md-4 category-blocks">
<div class="col-md-12">
<i class="fas fa-bullhorn"></i>
<h3>Effective Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
<button class="btn btn-primary">Learn more</button>
</div>
</div>
</div>
</section>
</body>
</html>
I need to set 3 blocks side by side in a page, so I applied 'col-md-4', unfortunately I was not getting space in middle of them even after I tried all the possible ways. Please help me out.
Why dont you do it with display: flex or maybe display: grid, with that you can do a gap: X and that will do the separation.
NOTE: the gap: X, can be diferent if you are using flex or grid, you can find it in here:
flex - https://coryrylan.com/blog/css-gap-space-with-flexbox
grid - https://developer.mozilla.org/es/docs/Web/CSS/gap
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>
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.
I have a sample website from this.
But i don't know how to make it "center"?
There is my code
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Mobile - Basic Pin Page Responsive</title>
<!-- Included Bootstrap CSS Files -->
<link rel="stylesheet" href="./js/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="./js/bootstrap/css/bootstrap-responsive.min.css" />
<!-- Includes FontAwesome -->
<link rel="stylesheet" href="./css/font-awesome/css/font-awesome.min.css" />
<!-- Website CSS Theme Css -->
<link rel="stylesheet" href="./css/stylesheet.css" />
</head>
<body>
<div class="wrapper">
<div id="main" class="container">
<div id="items" class="row-fluid" >
<div class="item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_04.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class="item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_07.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="author"> - John White - </div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_01.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_02.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_03.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_05.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
<div class=" item masonry-brick">
<div class="picture">
<a class="image" title="Title" href="#">
<img alt="" src="./img/image_08.jpg">
</a>
<div class="item-content">
<div class="description">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="meta">
<span>
<i class="icon-calendar"></i>
11 May 2013
</span>
<span>
<i class="icon-user"></i>
John
</span>
<span>
<i class="icon-heart-empty"></i>
10
</span>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<footer id="footer"></footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="./js/bootstrap/js/bootstrap.min.js"></script>
<script src="./js/jquery.masonry.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
And css file
body {
color: #000000;
font-family: sans-serif;
font-size: 12px;
font-weight: 400;
background-color: #CCCCCC;
}
.wrapper {}
#main {
margin-bottom: 30px;
margin-top: 55px;
}
#items {}
#items .item {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: linear-gradient(to bottom, #F6F6F6 0%, #EAEAEA 100%) repeat scroll 0 0 transparent;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(0, 0, 0, 0.1), 0 3px 1px rgba(0, 0, 0, 0.05);
text-shadow: 0 1px 0 #DDDDDD;
width: 236px;
margin: 10px;
float: left;
}
#items .item .item-content {
padding: 10px;
}
#items .item .picture .description {
margin-top: 10px;
}
#items .item .meta span {
font-size: 12px !important;
line-height: 16px !important;
margin-right: 5px;
}
#items .item .picture {
display: block;
position: relative;
z-index: 5;
border-top: 1px solid #999999;
border-radius: 4px 4px 4px 4px;
}
#items .item .picture a.image {
display: block;
height: auto;
width: 100%;
}
#items .item .picture img {
border-radius: 2px 2px 0px 0px;
height: auto;
position: relative;
width: 100%;
z-index: -1;
}
.picture img {
height: auto;
width: 100%;
}
.navbar-inner {
box-shadow: 0px 5px 10px #999 !important;
}
/* RESPONSIVE CSS HACKS
-------------------------------------------------- */
#media (max-width: 768px) {
#main {
margin-top: 5px;
}
}
Can you please help me?
Thanks.
Managed to gather the details I need. Can't test it through debug of devtools because Masory need to reload to re-init the size of item. This may work
Use the class .container wrapper. So it will be cantered.
Init your mansory like this .Don't set the columnsWidth property, and use gutter instead of margin in your CSS. This is to make your items have dynamic width with CSS
jQuery(document).ready(function() {
var $container = $('#items');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
isAnimated: true,
gutter: 10
});
});
});
In your CSS .Set width to dynamic, dont use float or margin (Because you use gutter instead of margin ^above)
#items .item {
box-sizing: border-box;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: linear-gradient(to bottom, #F6F6F6 0%, #EAEAEA 100%) repeat scroll 0 0 transparent;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(0, 0, 0, 0.1), 0 3px 1px rgba(0, 0, 0, 0.05);
text-shadow: 0 1px 0 #DDDDDD;
width: 20%;
}
When it come to small screen size, use #media query
#media (max-width: 768px){
#items item{
width: 50%;
}
}
I am working on getting a two column layout that extends to the bottom of my page.
However, my sidebar cuts off at the container-fluid height even though I am trying to get it to extend to the whole page.
What is weird is that my content column works fine.
HTML:
<div class="container-fluid">
<div class="row-fluid columns no-margin fill">
<div id="sidebar" class="span2 columns no-margin right-edge"></div>
<div id="contentWrapper" class="span10 columns no-margin pull-right"></div>
</div>
</div>
CSS:
html, body, form {
height: 100%;
min-height: 100%;
background-image:url("../../images/lightGreyBackground.png");
background-repeat: repeat;
font-family:"Segoe UI", Helvetica, Arial, Sans-Serif;
}
.container-fluid {
margin: 0 auto;
height: auto;
padding: 0px;
}
.columns {
height: 100%;
min-height:100%;
margin: 0px;
width: 100%;
}
.fill {
position: absolute;
height: 100%;
min-height: 100%;
}
.no-margin {
margin-left: 0%;
width: 100%;
}
.right-edge {
border-right: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#sidebar {
background-color: White;
padding-top:15px;
}
For have 2 column :
<html>
<head>
<style type="text/css">
.container-fluid { width: 100%;}
.float {
float: left;
width: 50%; /* Size colonne */
margin: 1em 0; /* Margin colonne */
}
.spacer { clear: both; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="float">Colonne 1</div>
<div class="float">Colonne 2</div>
<div class="spacer"></div>
</div>
</body>
</html>
Use the framework bootstrap or 960.gs, powerful front-end framework for faster and easier web development.
With bootstrap 3 :
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
</div>
</div>