I have these divs that are products
<div class="container">
<div class="product">
<div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details"/>
</div>
</div>
<div class="product">
<div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details"/>
</div>
</div>
</div>
And its CSS
.image{
display: block;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
max-height: 180px;
height: 60%;
margin-left: auto;
margin-right: auto;
padding-left:.40cm;
}
.description{
margin: 0 auto;
max-width: 95%;
}
.productname{
overflow: hidden;
display: block;
margin: 25px 0 0;
padding: 0;
line-height: 24px;
}
.price{
margin-top: 10px;
margin-bottom: 8px;
font-size: 18px;
font-weight: 500;
color: #E40613;
}
.product{
height: 320px;
border: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
text-align: center;
padding: 10px 0;
}
Now these are just two divs but they can be 10 or 15 through foreach loop when data is fetched from mysql
Now these divs are showing horizontally I want to have them vertically in a container with a slider, if not slider possible then how could displaying vertically be achieved?
You have to add display: inline-block to the product class. You may need to define widths as well if you have many divs.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
hello the subject I couldn't do about css is this, how can i draw this in the image?
what I want to do is to copy the image with html and css.
I tried with display flex and but I couldn't
.channel-left {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.channel-description {
width: auto !important;
}
<div class="channel-left mb-5">
<div class="channel-description">
<div class="channel-img">
<img src="img.jpg" class="img-circle">
</div>
<div class="channel-title">
<p>title</p>
<p>blabla</p>
</div>
</div>
<div class="channel-subs">
<button type="button" class="btn btn-large btn-outline-danger rounded"><i class="fa fa-heart"></i> Like</button>
</div>
</div>
.container {
display: flex;
background: black;
color: white;
align-items: center;
padding: 10px;
}
.description {
flex: 1 1 auto;
display: flex;
align-items: center;
}
.title {
padding: 10px;
}
.img {
border-radius: 90%;
overflow: hidden;
width: 50px;
height: 50px;
}
.subs {
flex: 0 1 auto;
}
<div class="container">
<div class="description">
<div class="img">
<img src="https://placekitten.com/50/50" class="img-circle">
</div>
<div class="title">
<p>title</p>
<p>blabla</p>
</div>
</div>
<div class="subs">
<button type="button" class="btn btn-large btn-outline-danger rounded">Like</button>
</div>
just give the simple flex css to parent, put all three items in same div and then give margin-left auto to last item to move it to right,
Rest style your typography and colors.
* {margin: 0; padding: 0; box-sizing: border-box;}
.channel-description {
display: flex;
align-items: center;
padding: 10px;
margin: 20px;
border: 1px solid #ddd;
}
.channel-subs {margin-left: auto;}
.channel-title {margin-left: 10px;}
<div class="channel-left mb-5">
<div class="channel-left mb-5">
<div class="channel-description">
<div class="channel-img">
<img src="img.jpg" class="img-circle">
</div>
<div class="channel-title">
<p>title</p>
<p>blabla</p>
</div>
<div class="channel-subs">
<button type="button" class="btn btn-large btn-outline-danger rounded"><i class="fa fa-heart"></i> Like</button>
</div>
</div>
</div>
Something like this would work:
.channel-left {
background: #1f2227;
border-radius: 15px;
color: white;
max-width: 400px;
padding-left: 20px;
padding-right: 20px;
}
.channel-left,
.channel-description {
display: flex;
align-items: center;
justify-content: center;
}
.channel-img {
flex-basis: 80px;
}
.channel-title,
.channel-description{
flex-basis: 100%;
}
<div class="channel-left mb-5">
<div class="channel-description">
<div class="channel-img">
<img src="img.jpg" class="img-circle">
</div>
<div class="channel-title">
<p>title</p>
<p>blabla</p>
</div>
</div>
<div class="channel-subs">
<button type="button" class="btn btn-large btn-outline-danger rounded"><i class="fa fa-heart"></i> Like</button>
</div>
</div>
I know you've already accepted an answer, however I want to post my own:
* {
font-family: sans-serif;
}
.channel-left {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
background: #222222;
padding-left: 10px;
padding-top: 10px;
border-radius: 10px;
}
.channel-description {
width: auto !important;
display: inherit;
flex-basis: 70%;
}
.img-circle {
border-radius: 50px;
border: 2px solid gray;
width: 50px;
}
.channel-info {
padding-left: 5px;
}
.btn-outline-danger {
background: #555555;
border-radius: 50px;
border: 2px solid gray;
height: 30px;
width: 150px;
color: white;
cursor: pointer;
margin-top: 25px;
}
.channel-subs {
display: inline-block;
float: right;
}
p {
color: white;
}
.channel-title {
font-weight: bold;
}
<div class="channel-left mb-5">
<div class="channel-description">
<div class="channel-img">
<img src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg" class="img-circle">
</div>
<div class="channel-info">
<p class="channel-title">Title</p>
<p class="channel-desc">blabla</p>
</div>
</div>
<div class="channel-subs">
<button type="button" class="btn btn-large btn-outline-danger rounded"><i class="fa fa-heart"></i> Like</button>
</div>
</div>
I wish to set multiple buttons to equal width in a container. I also wish to get the button to resize when it is in landscape mode or wider screen. How am I able to achieve that?
What I am trying to achieve is as follow
But what I get when I switch it back to Potrait
The code is in JSFiddle JSFiddle Code
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
.card{
border:0px solid;
position:relative;
height:200px;
background:url("https://preview.ibb.co/kJvJ5e/1847p.png") no-repeat top center;
background-size:cover;
}
.card img {
width:100%;
}
.search-box {
position : absolute;
display:inline-block;
bottom:-30px;
left:0;
right:0;
padding:15px;
text-align:center;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius:0px;
}
.container-fluid{
width:auto
}
.container-fluid.drop-shadow {
margin-top:2%;
margin-left:5%;
margin-right:5%
}
#child{
width:100%;
height: 20px;
margin: auto;
text-align: center;
margin-top: 40px;
}
.form-group {
width:100%;
margin-bottom:10px;
}
.btn-checkin{
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
.icon-addon {
position:relative;
}
.icon-addon label {
position: absolute;
left: 2px;
top: 2px;
padding: 8px;
font-size: 20px;
}
.icon-addon input {
height:40px;
padding-left:35px;
}
.currentposition{
position: -webkit-sticky;
position: sticky;
right:20px
}
.wrap {
width: 100%;
height: 50px;
padding-top: 10px;
padding-bottom:10px;
text-align: center;
}
button{
margin-left: 15px;
display: inline-block;
text-align: center;
white-space: nowrap;
color: #000000;
border-color: #B9E5fB;
text-transform: uppercase;
background-color: #B9E5fB;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 10px 10px;
font-size: 13px;
border-radius: 10px;
width:20%;
}
button:first-child{
margin-left: 0;
}
<body id="page-top" style="font-family:Arial">
<div class="card" >
<div class="search-box">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search classes" class="form-control" id="searchBar">
<label for="searchBar" class="glyphicon glyphicon-search" rel="tooltip" title="searchBar"></label>
</div>
</div>
<button class="btn-checkin" style="font-family:Arial">Check in</button>
</div>
</div>
<div id="child">
<div class="container-fluid">
<img src="img/location.png" class="pull-left" style="width:25px;height:20px;padding-left:10px" />
<p class="pull-left" style="padding-left:10px;font-family:Arial">Current Location <b>Sri Petaling</b></p>
</div>
<div class="container-fluid drop-shadow">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="img/7557.jpg" style="width:104px;height:64px;padding:10px 10px 10px 5px" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h5 class="media-left" style="padding-top:12px;color:#B9E5fB;font-family:Arial" >PERSONAL TRAINING</h5>
<p class="pull-left" style="font-size:12px;font-family:Arial;padding-top:3px">Strike Academy Fitness</p>
</div>
</div>
</div>
<div class="container-fluid drop-shadow" style="margin-top:20px">
<div class="container">
<p class="pull-left" style="font-size:12px;font-family:Arial;padding-top:3px">Plan your time</p>
</div>
<div class="wrap">
<button>All</button>
<button >Morning</button>
<button >Afternoon</button>
</div>
<div class="wrap">
<button>Evening</button>
<button>Tomorrow</button>
<button>This Week</button>
</div>
</div>
</div>
</body>
Results still not working? Please help
You can use bootstrap grid to achieve your goal. Wrap your buttons inside bootstrap columns as below. This creates columns of equal width and your buttons reside within each columns.
<div class="row">
<div class="col"> <button class="mybtn"> All </button> </div>
<div class="col"> <button class="mybtn">Morning</button> </div>
<div class="col"> <button class="mybtn">Afternoon</button> </div>
</div>
You can add spacing between your buttons by providing a margin:
.mybtn
{
margin:0 5px;
}
Read more Here
Use col-md-4 for medium size devices, col-sm-4 for small devices, col-xs-4 for extra small devices.
Try this link.
http://jsfiddle.net/my5hdu6k/7/
To settle the button the way you want, you need to limit the width of them not exceeding 33.33% of total width in any screen size.For that, you need to use parent row div and wrap each button inside col div as shown in the code below.
<div class="wrap">
<div class="row">
<div class="col">
<button>Button 1</button>
</div>
<div class="col">
<button>Button 2</button>
</div>
<div class="col">
<button>Button 3</button>
</div>
</div>
Then, you have to trick the text to be ellipsis to safe guard the exceeding text for the smaller screen ( this may not be require for your this instance but it is good practice to plan for worst ). Look closely to the changes I made for the .button class in CSS.
.wrap {
width: 250px;
height: 50px;
padding: 25px;
text-align: center;
display: inline-block;
width:100%;
}
.col{padding:0 5px;display:inline-block;width:33.33%;}
.row{margin:0 -5px;} /* Customized the .row class of bootstrap */
button{
margin:5px 0; /* to undo your older style */
width:100%;
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
}
button:first-child{
margin:5px 0; /* to undo your older style */
}
Please check the provided jsfiddle
This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 5 years ago.
I'm working on a page that uses Bootstrap and have used this to define columns on this Codepen pen: https://codepen.io/smifaye/pen/GmeQrV
However one thing I can't seem to figure out is how to keep the height of the boxes uniform. I've set a min-height value for these boxes but my mind has gone blank as to how to make all divs resize at once.
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0;
min-height: 250px;
}
Also I'd like the buttons to stay at the bottom of the div but can't figure this out either :(
Any help would be massively appreciated.
(The menu area on the right is part of the design of the website and can't be changed)
Used Flexbox you can set equal height in div
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0;
//min-height: 250px;
height: 100%;
}
.button {
min-height: 36px;
height: auto;
width: auto;
padding: 0 36px 0 36px;
border: 2px solid #00019F;
font-size: 1em;
color: #FFFFFF;
background-color: #00019F;
border-radius: 5px;
text-decoration: none;
}
.button:hover {
background-color: #2D389C;
cursor: pointer;
}
.button:focus {
border: 2px solid #FF9900;
outline: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row " style="margin: 0px;">
<div class="col-md-4">
Menu area that can't be removed
</div>
<div class="col-md-8">
<div class="row row-eq-height">
<div class="col-sm-6 col-md-4">
<div class="recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Your property</h3>
<p style="padding: 10px 10px 0px;"><strong>Find</strong> your collection days</p>
<p style="padding: 0px 10px;"><strong>Report</strong> a missed collection</p>
<p style="padding: 0px 10px;"><strong>Order</strong> a new recycling bin, box or bag</p>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/property"> <button class="button">Find, report, order</button> </form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class=" recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Cleansing issues</h3>
<p style="padding: 10px 10px 0px;"><strong>Report</strong></p>
<ul>
<li>Dumped rubbish</li>
<li>Dog fouling</li>
<li>Graffiti</li>
<li>Other</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/street"> <button class="button">Report</button> </form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Additional information</h3>
<ul style="padding-top: 10px;">
<li>Frequently asked questions</li>
<li>Communal collections</li>
<li>Large household item collections</li>
<li>More</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="http://www.camden.gov.uk/ccm/content/environment/waste-and-recycling/recycling-rubbish-and-reuse/"> <button class="button">View</button> </form>
</div>
</div>
</div> </div>
</div>
you can use display:flex on col-md-8 to equal the heights of the col-md-4 then add height:100% to recycling plus some padding-bottom to make 'room' for the buttons
then add position:absolute and position the form at the bottom of every recycling box
P.S. your HTML is a mess. inline styles, col-12 inside col-8 . columns inside columns without any rows that's not correct . see here > http://getbootstrap.com/examples/grid/ . columns should be nested inside ROW's and then inside other columns eg
<div class="col-md-8">
.col-md-8
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
for your solution see snippet below or jsFiddle
.col-md-8 {
display: flex;
}
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0 0 60px;
height: 100%;
position: relative;
}
.button {
min-height: 36px;
height: auto;
width: auto;
padding: 0 36px 0 36px;
border: 2px solid #00019F;
font-size: 1em;
color: #FFFFFF;
background-color: #00019F;
border-radius: 5px;
text-decoration: none;
}
.button:hover {
background-color: #2D389C;
cursor: pointer;
}
form {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 15px;
text-align: center;
}
.button:focus {
border: 2px solid #FF9900;
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row" style="margin: 0px;">
<div class="col-md-4">
Menu area that can't be removed
</div>
<div class="col-md-8">
<div class="col-sm-6 col-md-4">
<div class="col-md-12 recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Your property</h3>
<p style="padding: 10px 10px 0px;"><strong>Find</strong> your collection days</p>
<p style="padding: 0px 10px;"><strong>Report</strong> a missed collection</p>
<p style="padding: 0px 10px;"><strong>Order</strong> a new recycling bin, box or bag</p>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/property">
<button class="button">Find, report, order</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="col-md-12 recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Cleansing issues</h3>
<p style="padding: 10px 10px 0px;"><strong>Report</strong></p>
<ul>
<li>Dumped rubbish</li>
<li>Dog fouling</li>
<li>Graffiti</li>
<li>Other</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/street">
<button class="button">Report</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="col-md-12 recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Additional information</h3>
<ul style="padding-top: 10px;">
<li>Frequently asked questions</li>
<li>Communal collections</li>
<li>Large household item collections</li>
<li>More</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="http://www.camden.gov.uk/ccm/content/environment/waste-and-recycling/recycling-rubbish-and-reuse/">
<button class="button">View</button>
</form>
</div>
</div>
</div>
</div>
If you do not want:
Javascript
CSS3
Then you can use this:
.table {
display: table;
width: 100%;
border-spacing: 10px 0;
}
.cell {
position: relative;
display: table-cell;
border: 1px solid #f00;
padding: 15px 15px 40px;
}
button {
position: absolute;
bottom: 15px;
right: 15px;
}
<div class="table">
<div class="cell">
<div class="inner">
<strong>Title</strong>
<p>Some text.</p>
<button>Button</button>
</div>
</div>
<div class="cell">
<div class="inner">
<strong>Title</strong>
<p>Some text.</p>
<button>Button</button>
</div>
</div>
<div class="cell">
<div class="inner">
<strong>Title</strong>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<button>Button</button>
</div>
</div>
</div>
Of course, you can target the table and cell class with media queries to disable it for phones for example.
If you cannot use JS/jQuery, then you should set both min-height and max-height for these div's.
e.g.
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0;
min-height: 250px;
max-height: 250px;
}
I have three elements that are coded similarly .infobtnlg, .twitter, .infobtnsm.
The first .infobtnlg is centered nicely within a div .section1 as I want it to be, the second .twitter and third .infobtnsm are not centered within their respective sections. The width is set, the left/right margins are auto. I added text-align: center; for good measure.
What am I missing?
DEMO PLAYGROUND
HTML
<div class="trisection">
<div class="section1">
<button type="button" class="infobtnlg">The May Difference</button>
<button type="button" class="infobtnlg">Parent Reflections</button>
<button type="button" class="infobtnlg">Make a Gift</button>
</div>
<div class="section2">
<div class="twitter">
<img src="/images/twitter-bl.png" alt="twitter"/>Announcements
<hr>
</div>
</div>
<div class="section3">
<button type="button" class="infobtnsm" style="background-color: #003b76;">In the News</button>
<button type="button" class="infobtnsm" style="background-color: #5a9331;">The May Way</button>
<button type="button" class="infobtnsm" style="background-color: #ff0000;">Meet Our Teachers</button>
<button type="button" class="infobtnsm" style="background-color: #ffcc00;">Friends of May</button>
<button type="button" class="infobtnsm" style="background-color: #fb8d20;">The May Center</button>
</div>
</div>
CSS
.section1, .section2, .section3 {
width: 90%;
margin: 0px auto;
height: 255px;
text-align: center;
}
.infobtnlg, .twitter, .infobtnsm {
display: block;
width: 93%;
margin: 6px auto;
border-radius: 10px;
}
.infobtnlg {
font-family: Garamond, Georgia, 'Times New Roman', serif;
font-size: 1.5em;
background-color: #5a9332;
height: 77px;
text-shadow: -1px -1px 1px #3c3c3c;
box-shadow: -2px 2px 1px #3c3c3c;
}
.twitter {
height: 240px;
background-color: #fff;
background-image: url("/images/twfeed.png");
background-size: contain;
color: #5a9332;
font-size: 18px;
vertical-align: middle;
font-weight: bold;
border: solid 1px #e2dce0;
}
.infobtnsm{
font-family: Scala, Myriadbold, sans-serif;
font-size: 18px;
text-align: center;
height: 40px;
margin-bottom: 5px;
}
Add float: none; to .twitter and .infobtnsm or remove float: left; from
.vista .ie8 .infobtnlg, .twitter, .infobtnsm {
float: left;
width: 30%;
}
text-align will help you centering text inside those div
//to center contents inside div you shoul use:
#div {
margin:auto;
}
OR
you may simply choose to use bootstrap div columns which will do all your things very easy these contents will be fully responsive
//html
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 section1">
//section1 contents
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 twitter">
//twitter contents
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 infobtnsm">
//infobtnsm contents
</div>
</div>
</div>
</div>
I've got a lot of trouble with getting my checkboxes vertical aligned in my divs with a dynamic height.
I have some of my view:
<div class="col-md-7">
<div class="row recent-information">
<div class="product-navigation">
<div class="product-header-text">
<div class="col-md-3 product-details">
<p>Product name</p>
</div>
<div class="col-md-4 product-details">
<p>Note</p>
</div>
<div class="col-md-2 product-details">
<p>Price</p>
</div>
<div class="col-md-2 product-details">
<p>Stock</p>
</div>
</div>
</div>
#foreach (var item in Model.Products)
{
<div class="product-header">
<div class="product-header-text">
<div class="col-md-3 product-details-entity">
<h6>#item.Name</h6>
</div>
<div class="col-md-4 product-details-entity">
<h6>#item.Description</h6>
</div>
<div class="col-md-2 product-details-entity">
<h6>#item.Price DKK</h6>
</div>
<div class="col-md-1 product-details-entity">
<h6>#item.Stock</h6>
</div>
<div class="col-md-1 product-details-checkbox">
#Html.CheckBox("naem", new { #class = "products-checkbox" })
</div>
</div>
</div>
}
</div>
</div>
And the style:
.product-header {
min-height: 7%;
min-width: 100%;
margin-bottom: 3px;
border-bottom: 1px solid #e6e6e6;
overflow: hidden;
}
.product-header-text {
width: 98%;
margin-left: 10px !important;
margin-right: 10px !important;
float: left;
font-weight: 700 !important;
margin-bottom: 3px;
height: 100%;
}
.product-details {
font-weight: 500 !important;
margin-top: 13px;
font-family: 'Raleway', sans-serif;
font-size: 12px;
height: auto;
min-height: 100%;
}
.product-details-entity {
margin-top: 20px;
height: auto;
}
input[type="checkbox"] {
background: #f8f8f5;
-webkit-appearance: none;
height: 22px;
width: 22px;
margin-top: 20%;
cursor: pointer;
margin-left: 65px;
}
input[type="checkbox"]:checked {
background-image: url("../Images/checkmark2.png");
height: 22px;
width: 22px;
}
My problem is, that my divs, the product-details are dynamically based on the content from the database, and I can't get my checkboxes to follow.