I am using a background image and an overlay in my div. But the overlay doesn't overlap properly. It is leaving some margins at both the sides for reasons. I tried setting margins so that it overlaps completely but then it disturbs my layout.
How can i correct it?
/*numscroller*/
.image{
height:auto;
width:100%;
background:#FFCC99;
}
.over2{
height:auto;
width:100%;
background-color:rgba(0,0,0, 0.7);
}
.num{
margin:auto;
padding:6rem 0rem;
float:left;
}
<script src="https://raw.githubusercontent.com/tinywall/numscroller/master/numscroller-1.0.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row " >
<div class="col-12 image">
<div class="over2">
<div class="row justify-content-around">
<div class=" num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<center>
<h3><b>Slums covered</b></h3>
<h3 class='numscroller' data-min='1' data-max='7' data-delay='1' data-increment='1'><b>7</b></h3>
</center>
</div><!--num col-10 ends-->
<div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
<center>
<h3><b>Lives changed</b></h3>
<h3 class='numscroller' data-min='1' data-max='400' data-delay='1' data-increment='3'><b>400</b></h3>
</center>
</div><!--num col-10 ends-->
<div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
<center>
<h3><b>Our supporters</b></h3>
<h3 class='numscroller' data-min='1' data-max='30' data-delay='1' data-increment='1'><b>30</b></h3>
</center>
</div><!--num col-10 ends-->
</div><!--row justify ends-->
</div><!--over ends-->
</div><!--col-12 ends-->
</div><!--row ends-->
</div>
you can position the image container relatively, and the overlay should be position absolutely.
.image {
position: relative;
height: 100px;
width: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,.3);
display: flex;
justify-content: center;
align-items: center;
}
<div class="image">
<span>I am the image </span>
<div class="overlay">
I am the overlay
</div>
</div>
Related
I have product layout page. Products will be displayed on this page, along with a picture, person's name, title, and description. However, all of those image, title, and description will have the same link, while the person name will have a separate link.
The problem is when i add "href" to the whole div, it also cover the person name and it work as the single link.
How can i make it cover for the whole product card with one link and, only person name for the another link.
By inspecting the first and second product cards, you may execute the code and locate my current problem.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #CCC;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group">
</div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
Please check the second card which I updated
It's not a good practice to wrap a div with a tag since div is a block element though it will work. So you can simply add a onclick event to direct to a link and add a cursor pointer styling to let your audience is aware of the link and then wrap the name tag with an tag with another link.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #ccc;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
#card-2 {
cursor: pointer;
}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/><link rel="stylesheet" href="./style.css" />
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group"></div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"
alt=""
/>
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<div
id="card-2"
class="item col-xs-4 col-md-3"
onclick="window.location='https://www.youtube.com'"
>
<div class="thumbnail">
<img
class="img-id"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg"
alt=""
/>
<div class="person">
<a href="https://www.linkedin.com/">
<p class="person-name">Person Name</p>
</a>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
</div>
</div>
</div>
I am trying to make expanding image preview similar to this but as I move from left to right clicking on the circular div, the tab shifts down from the pointer. I don't understand why this is happening.
Please refer my fiddle link.
Please help me with this. I am unable to figure out where I am going wrong.
And is there any way to change the pointer color dynamically based on the color of the circular div?
Thankyou.
jQuery(document).ready(function() {
$(".mn").click(function() {
var activeTab = $(this).attr("href"); //Find the target via the href
if ($(activeTab).is(':visible')) {
$(activeTab).slideUp();
$(this).removeClass("active");
} else {
$(".mn").removeClass("active"); //Remove any "active" class
$(this).addClass("active")
$('.tab').hide();
$(activeTab).fadeIn();
}
return false;
});
});
.wrap {
max-width: 100%;
margin: auto;
}
.full-width-div {
position: relative;
width: 100%;
left: 0;
}
.mn.active:after {
content: "";
position: absolute;
left: 50%;
bottom: auto;
margin: 0 0 0 -12px;
/*width: 0;*/
/*height: 0;*/
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid red;
}
.img-circle {
border-radius: 50%;
}
.img-circle {
border-radius: 0;
}
.ratio {
background-position: center center;
background-repeat: no-repeat;
background-size: auto;
height: 0;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
.mn.active,
.mn:focus {
background: #f9f9f9;
outline: none
}
.tab {
display: none;
clear: both;
margin: 12px 2% 10px 0;
background: red;
min-height: 100px;
width: 100%;
padding: 5px;
}
.col-custom-eight {
position: relative;
float: left;
width: 12.5%;
min-height: 1px;
padding-left: 5px;
padding-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="full-width-div container">
<div class="row">
<div class="col-md-12">
<div class="wrap">
<div class="row">
<div class="col-custom-eight col-sm-2">
<a href="#tab1" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">1</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab2" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center caption">2</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab3" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #795548;"></div>
<div class="text-center caption">3</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab4" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FF9800;"></div>
<div class="text-center caption">4</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab5" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">5</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab6" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
<div class="text-center caption">6</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab7" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">7</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab8" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
<div class="text-center caption">8</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab1" class="tab" style="background-color: #00BCD4">Tab 1
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab2" class="tab" style="background-color: #FFC107">Tab 2
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab3" class="tab" style="background-color: #795548">Tab 3
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab4" class="tab" style="background-color: #FF9800">Tab 4
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab5" class="tab" style="background-color: #00BCD4">Tab 5
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab6" class="tab" style="background-color: #8BC34A">Tab 6
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab7" class="tab" style="background-color: #00BCD4">Tab 7
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab8" class="tab" style="background-color: #8BC34A">Tab 8
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Your rows have 1px height which results in the pointer dropping down 1px for every circle. I fixed your fiddle, see here.
You can set the color of the pointer with just CSS, like for instance:
a[href="#tab1"]:after {
border-bottom-color: rgb(0, 188, 212) !important;
}
a[href="#tab8"]:after {
border-bottom-color: #8BC34A !important;
}
I am having a issue with Bootstrap in Firefox. My columns are set correctly in Chrome, Opera and Safari, but not in Firefox.
I created ten boxes distributed in two rows. Five in each row. These boxes has classes .col-sm-2 and .col-xs-10, besides a class called .categoria.
<div class="container categorias">
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/corneta.png" alt="corneta">
<p>Novidades</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/contribua.png" alt="contribua">
<p>Contribua</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/nota.png" alt="nota">
<p>Sua Nota é Um Show</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/parceiros.png" alt="parceiros">
<p>Parceiros</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/projetos.png" alt="projetos">
<p>Projetos</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/historico.png" alt="historico">
<p>Histórico</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/objetivos.png" alt="objetivos">
<p>Objetivo, Missão, <br> Valores</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/relatorios.png" alt="balancetes">
<p>Balancetes</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/diretoria.png" alt="diretoria">
<p>Diretoria</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/estatuto.png" alt="estatuto">
<p>Estatuto</p>
</div>
</div>
</div>
</div>
In Chrome, Opera and Safari, they appear correctly:
Screenshoot from Chrome
But in Firefox, it is completely irregular.
Screeshoot from Firefox
Note that I am using JQuery to set these boxes max-height so they will never have the height bigger than the width. I using the following code:
$(document).ready( function(){
var columnWidth = $('.categoria').innerWidth();
$('.categoria').css('max-height', columnWidth);
});
And here is the css:
.categoria{
transition: background-color 0.5s linear, box-shadow 0.5s linear;
background-color: #76C6C5;
height: 140px;
margin-left: 1%;
margin-right:1%;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
display: table;
}
.categoria img{
padding-top: 15%;
height: 50%;
display:block;
margin-left: auto;
margin-right: auto;
}
.categoria.col-sm-2 > p{
font-size: 14px;
padding-top: 10px;
}
#media(max-width: 768px){
.categoria{
vertical-align: middle;
height: 8em;
}
.categoria.col-sm-2 > p{
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
}
.categoria img{
display: none;
}
}
.col-xs-offset-1{
padding-left: 15px;
}
To be honest, I am not even sure if it is a problem with Bootstrap. But I don't know what else could be.
Ok so you should change display to table only when you don't want to show image :) that seems to resolve issue with uneven heights
CSS:
.categoria{
transition: background-color 0.5s linear, box-shadow 0.5s linear;
background-color: #76C6C5;
height: 140px;
margin-left: 1%;
margin-right:1%;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
display: block;
}
.categoria img{
padding-top: 15%;
height: 50%;
display:block;
margin-left: auto;
margin-right: auto;
}
.categoria.col-sm-2 > p{
font-size: 14px;
padding-top: 10px;
}
#media(max-width: 768px){
.categoria{
vertical-align: middle;
height: 8em;
display:table;
}
.categoria.col-sm-2 > p{
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
}
.categoria img{
display: none;
}
}
.col-xs-offset-1{
padding-left: 15px;
}
HTML :
<div class="container categorias">
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="corneta">
<p>Novidades</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="contribua">
<p>Contribua</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="nota">
<p>Sua Nota é Um Show</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="parceiros">
<p>Parceiros</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="projetos">
<p>Projetos</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="historico">
<p>Histórico</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="objetivos">
<p>Objetivo, Missão, <br> Valores</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="balancetes">
<p>Balancetes</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="diretoria">
<p>Diretoria</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="estatuto">
<p>Estatuto</p>
</div>
</div>
</div>
</div>
Fiddle
Try to use a constant value instead of a variable and intead of max-height property use height.
$(document).ready( function(){
// This value v
var columnWidth = $('.categoria').innerWidth();
columnWith = constant;
// This also change
$('.categoria').css('height', columnWidth);
});
If this doesn't change anything check all your tags matches. I can't tell you how many times it has happened to me when I don't close tags.
Hope I help.
Here is my homepage
I want to extend the height of my image to fit the whole screen. I know that I have to adjust the height attribute, I did that, and nothing seems to work.
CSS
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url('../img/hero-slider/boxfill2sm.jpg');
background-size: cover;
position: relative;
padding-top: 0;
height: auto;
}
Note: I tried height: auto;. It doesn't do anything.
HTML
<section class="hero">
<div class="container-fluid no-margin no-padding">
<div class="col-md-8 col-sm-12 col-xs-12 col-lg-8" id="hero-left">
<div>
<div class="row">
<div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 391px;"><div class="hero-slider" style="width: auto; position: relative;">
<div class="slide first-slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 50; display: block;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp fadeInDown">
<h2 style="margin-top:50px;" class="text-left">MEET TUTTI.ED</h2>
<p>EFFECTIVE DIGITAL LEARNING</p>
<p>Tutti.ed is our educational software platform that empowers education companies to bring state-of-the-art digital learning products to market quickly.</p>
<a class="btn btn-primary" href="/tutti-ed">Learn More</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<!-- <div class="video"><img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/></div> -->
<!-- <img class="iphone" src="img/hero-slider/iphone.png" width="649" height="400" alt="Coming Soon Page"/> -->
</div>
</div>
<div class="slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 0; display: none;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp">
<h2 style="margin-top:50px;" class="text-left">MEET TUTTI.DEV</h2>
<p>BY DEVELOPERS, FOR DEVELOPERS</p>
<p>Tutti.dev is our cloud application suite that enables software teams to work more effectively and efficiently. Get it together with Tutti!</p>
<a class="btn btn-primary" href="/tutti-dev">Learn more</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<!-- <div class="video"><img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/></div> -->
</div>
</div>
<div class="slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 0; display: none;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp">
<h2 style="margin-top:70px;" class="text-left">WHY AVENIROS?</h2>
<p>Our team has been building content delivery platforms for over 20 years. We have experience with development from large scale LMS installations to mobile applications. We can offer full turn-key technical services for your content or help your technical team get to market on time.
</p>
<a class="btn btn-primary" href="#" data-scrollto="#about">About us</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<div class="video">
<!-- <img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/> -->
<!--
<img src="img/hero-slider/macbook.png" width="782" height="422" alt=""/>
<div class="vide-holder">
<iframe src="//player.vimeo.com/video/79036490?byline=0&portrait=0&color=ffeeac" width="720" height="405"></iframe>
</div>
-->
</div>
</div>
</div>
</div></div><div class="bx-controls bx-has-pager"><div class="bx-pager bx-default-pager"><div class="bx-pager-item">1</div><div class="bx-pager-item">2</div><div class="bx-pager-item">3</div></div></div></div>
</div>
</div>
</div>
<!--Hero Slider-->
<div class=" col-xs-12 col-sm-12 col-md-4 col-lg-3 pull-right" id="hero-right" style="height: 496px;">
<div>
<div>
<div class="animated fadeInLeft">
<h1>Learnosity</h1>
<p>Did you know we are partnered with learnosity?</p>
<p>To learn more click the button below..filler. </p>
<a class="btn btn-primary" href="#">Learnosity</a>
</div>
</div>
</div>
<!--Close Hero Slider-->
</div>
</div>
</section>
This should work
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url(j.jpg) no-repeat center center fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
position: relative;
padding-top: 0;
height: 100%;
width: 100%
}
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url(j.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
padding-top: 0;
height: 100%;
width: 100%
}
You need to determine screen height for that so its better to use JavaScript
which can be accessed with screen.height. Also if you are using jQuery, you can get this property with $( window ).height();
$(document).ready(function() {
h=$(window).height();
$('.hero').css({'height':h+'px'});
});
Guys basically there will be a bootstrap container div, and inside there will be 4 card style divs with toggle expand/retract button. When you click on one card's button, the div will expand all the way to the container's width. Please check the image. I'm a newbie to jQuery and with the script I've, i'm not able to achieve the full width. If someone can help me out it'll be great. Here's the code below -
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() == 600 ? "200px" : "600px";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>
Is this what you're looking for?
I suggest taking a look at MDN to get deeper insights about CSS props: https://developer.mozilla.org/en-US/docs/Web/CSS/width
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() > 0 ? "0%" : "100%";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>