I am trying to hide a single slide in this carousel https://jsfiddle.net/dforce/oz0kr9p4/, via css giving a display:none; to a specific slider.
<div class="testimonial-item equal-height style-6" style="height: 254px; display:none;">
<div class="testimonial-image cell-left">
<img src="http://tivatheme.com/wordpress/wp-content/plugins/tiva-testimonials-slider/images/agnes.jpg" alt="Agnes A. Bell">
</div>
<div class="cell-right">
<div class="testimonial-name">Agnes A. Bell
</div>
<div class="testimonial-job">Assistant Project Manager
</div>
</div>
<div class="testimonial-content quote"><i class="fa fa-quote-left">
</i>This is one of the best WordPress themes I have used. All aspects are exactly what experienced designers and developers crave from a theme.
</div>
</div>
At first sight it seems working but it does not remove completely the slide with instruction "display:none". In fact when the carousel go on the second block you can see an empty space.
Is there a way to avoid this behavior?
Without knowing exactly what you are trying to accomplish in terms of end result it is difficult to give you a precise answer. However, what I would do in this scenario is simply <!-- note out --> the two divs for one of the carousel items.
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:2,
itemsDesktop:[1000,2],
itemsDesktopSmall:[980,1],
itemsTablet:[768,1],
pagination:true,
navigation:false,
navigationText:["",""],
autoPlay:true
});
});
.owl-carousel .owl-item img {
display: block;
width: 17%;
float: left;
border: 5px solid #fff;
border-radius: 20px;
margin-left: 54px;
margin-right: 35px;
margin-top: 15px;
}
.testimonial-item.equal-height.style-6 {
background-color: #eee;
border-radius: 10px;
margin: 10px;
}
.cell-right {
text-align: center;
margin-right: 80px;
padding-top: 35px;
padding-bottom: 20px;
}
.testimonial-name {
font-weight: 600;
}
.testimonial-content.quote {
padding: 17px 55px;
}
.et_right_sidebar #main-content .container:before{
display: none;
}
#main-content .container {
padding-top: 10px;
}
i.fa.fa-quote-left {
padding: 0px 10px;
color: #999;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="testimonial-slider" class="owl-carousel">
<div class="testimonial-item equal-height style-6" style="height: 254px;">
<div class="testimonial-image cell-left">
<img src="http://tivatheme.com/wordpress/wp-content/plugins/tiva-testimonials-slider/images/agnes.jpg" alt="Agnes A. Bell">
</div>
<div class="cell-right">
<div class="testimonial-name">Agnes A. Bell
</div>
<div class="testimonial-job">Assistant Project Manager
</div>
</div>
<div class="testimonial-content quote"><i class="fa fa-quote-left">
</i>This is one of the best WordPress themes I have used. All aspects are exactly what experienced designers and developers crave from a theme.
</div>
</div>
<div class="testimonial-item equal-height style-6" style="height: 254px;">
<div class="testimonial-image cell-left">
<img src="http://tivatheme.com/wordpress/wp-content/plugins/tiva-testimonials-slider/images/agnes.jpg" alt="Agnes A. Bell">
</div>
<div class="cell-right">
<div class="testimonial-name">Agnes A. Bell
</div>
<div class="testimonial-job">Assistant Project Manager
</div>
</div>
<div class="testimonial-content quote"><i class="fa fa-quote-left">
</i>This is one of the best WordPress themes I have used. All aspects are exactly what experienced designers and developers crave from a theme.
</div>
</div>
<div class="testimonial-item equal-height style-6" style="height: 254px;">
<div class="testimonial-image cell-left">
<img src="http://tivatheme.com/wordpress/wp-content/plugins/tiva-testimonials-slider/images/agnes.jpg" alt="Agnes A. Bell">
</div>
<div class="cell-right">
<div class="testimonial-name">Agnes A. Bell
</div>
<div class="testimonial-job">Assistant Project Manager
</div>
</div>
<div class="testimonial-content quote"><i class="fa fa-quote-left">
</i>This is one of the best WordPress themes I have used. All aspects are exactly what experienced designers and developers crave from a theme.
</div>
</div>
<!-- <div class="testimonial-item equal-height style-6" style="height: 254px;">
<div class="testimonial-image cell-left">
<img src="http://tivatheme.com/wordpress/wp-content/plugins/tiva-testimonials-slider/images/agnes.jpg" alt="Agnes A. Bell">
</div>
<div class="cell-right">
<div class="testimonial-name">Agnes A. Bell
</div>
<div class="testimonial-job">Assistant Project Manager
</div>
</div>
<div class="testimonial-content quote"><i class="fa fa-quote-left">
</i>This is one of the best WordPress themes I have used. All aspects are exactly what experienced designers and developers crave from a theme.
</div>
</div>
<div class="testimonial-item equal-height style-6" style="height: 254px;">
<div class="testimonial-image cell-left">
<img src="http://tivatheme.com/wordpress/wp-content/plugins/tiva-testimonials-slider/images/agnes.jpg" alt="Agnes A. Bell">
</div>
<div class="cell-right">
<div class="testimonial-name">Agnes A. Bell
</div>
<div class="testimonial-job">Assistant Project Manager
</div>
</div>
<div class="testimonial-content quote"><i class="fa fa-quote-left">
</i>This is one of the best WordPress themes I have used. All aspects are exactly what experienced designers and developers crave from a theme.
</div>
</div> -->
</div>
</div>
</div>
</div>
</body>
</html>
You could also use inline styles on the divs such as visibility: hidden;
Related
I have a pretty weird situation here.
I have this HTML:
<!DOCTYPE html>
<html>
<head>
<title>Notes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
test1
</p>
<a href="/notes/pin/1" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>testtt</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/4" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>- test</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
</div>
<div style="padding-top:50px;"></div>
<!--- NON-PINNED -->
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/2" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Testi</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Dhchjc
</p>
<a href="/notes/pin/3" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Djfjgn<br>- eat 🌮</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Fhfj
</p>
<a href="/notes/pin/5" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Brjdjc</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
</div>
<a href="/notes/new/">
<div id="floating-button" data-toggle="tooltip" data-placement="left" data-original-title="Create">
<p class="plus">+</p>
</div>
</a>
</body>
</html>
And my CSS:
#floating-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: #db4437;
position: fixed;
bottom: 30px;
right: 30px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
}
.column {
margin-top: 10px;
}
.card {
margin-left: 10px;
margin-right: 10px;
max-height: 500px;
}
When viewing on regular desktop mode, everything is fine.
When on Chrome + mobile viewport, there is a slight overflow on the x axis.
When viewing on Firefox + mobile viewport, it is fine.
When removing the script tag importing Font-Awesome, there are no longer any problems on Chrome. The font-awesome CSS CDN also causes this.
There are two columns because one is for pinned notes (displayed first) and the other for regular ones.
The problem
When on Chrome with mobile viewport, the page width is larger than the viewport, but not with Firefox. I fixed it by remove the script tag importing Font-Awesome, but I would need font awesome and it's icons.
I've fixed this by adding .columns { margin-right:0px;margin-left:0px;} to the CSS. See this bulma issue.
My icons keep going to the left:
<section class="section-what-i-do">
<div class="container">
<h2>What I do</h2>
<p class="sub-header" id="learn-more-section">Studying, creating, learning</p>
<div class="row">
<div class="col-md-4">
<i class="ion-ios-monitor-outline icon-large"></i>
<h3>Computer Science</h3>
</div>
<div class="col-md-4">
<i class="ion-ios-cloudy-outline icon-large"></i>
<h3>Web development</h3>
</div>
<div class="col-md-4">
<i class="ion-ios-bolt-outline icon-large"></i>
<h3>Learning new tech</h3>
</div>
</div>
</div>
</section>
Css:
.icon-large{
font-size: 350%;
text-align: center;
margin: 0 auto 10px auto;
color: #e74c3c;
}
I do not want to use Bootstrap glyphicons, the ionicons fonts look much better to me.
The icons appear to the far left as if there is code that is set to float: left.
Try putting the text-align:center on the parent div...
You icons are display:inline by default so aren't affected by margin.
.icon-large {
font-size: 350%;
color: #e74c3c;
}
.col-md-4 {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<section class="section-what-i-do">
<div class="container">
<h2>What I do</h2>
<p class="sub-header" id="learn-more-section">Studying, creating, learning</p>
<div class="row">
<div class="col-md-4">
<i class="ion-ios-monitor-outline icon-large"></i>
<h3>Computer Science</h3>
</div>
</div>
</div>
</section>
Let me proceed by saying that I have searched Google and Stack Overflow to find the answer to this. I have tried many solutions, but none are working.
The main issue right now is the fact that my CSS won't override the Bootstrap CSS in the jumbotron. It won't change the background color, background image or nav bar settings.
I have tried using !important. I have tried calling my stylesheet after calling the bootstrap one. In my current version, I have the #import code to call the Bootstrap CSS at the beginning of my own CSS file. None have worked. For a few items, I changed the bootstrap file, but only for color.
Please help me figure out why my file will not override bootstrap. You can see the site at http://www.dismantledesign.com/testsite2/
The site is incomplete. I just can't proceed with styling until I figure this out.
Sorry if any code ends up missing. SO doesn't always like my pastes from TextWrangler. Feel free to look at it via the source code in the link.
Code below:
#import url("bootstrap.min.css");
body{
font-family: 'Raleway', Helvetica, Arial;
font-size: 16px;
color: #666666;
font-weight: 400;
letter-spacing: 1px;
}
p{
line-height: 20pt;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6{
color: #333333;
text-transform: uppercase;
font-family: 'Raleway', Helvetica, Arial;
font-weight: 700;
}
a{
color: #00acec;
text-decoration: none;
font-family: 'Raleway', Helvetica, Arial;
font-weight: 600;
}
a:hover, a:focus{
color: #5a5e61;
text-decoration: none;
}
.btn-default{
border-radius: 2px;
border: 1px solid #a7adb0;
font-size: 14px;
color: #a7adb0;
font-weight: 700;
text-transform: uppercase;
padding: 11px 20px;
}
.btn-default:hover{
background: #5a5e61;
color: #a7adb0;
}
/*end*/
/*logo*/
.navbar-brand{
width: 174px;
height: 50px;
padding: 0;
margin: 0;
text-indent: -9999px;
}
/*end*/
/*navigation*/
.navbar-default{
background: none;
border: none;
padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a{
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
color: #a7adb0;
padding: 11px 0;
text-align: center;
}
.navbar-default .navbar-nav>li>a:hover[
color: #fff;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
background: none;
outline: 0;
color: #fff;
}
.navbar-toggle{
border: none;
margin-top: 0;
margin-right: 0;
width:32px;
height: 32px;
text-align: center;
}
.navbar-default .navbar-collapse{
border: none;
background: rgba(0,0,0,0.1) !important;
border-radius: 2px;
box-shadow: none;
}
.jumbotron{
background: #363737 url("img/tempjumbotron.jpg") no-repeat;
background-size: cover;
max-height: 800px;
padding: 60px 0;
margin: 0;
}
/*end*/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Hey, this is the CC title!-->
<title>Contra Coda Media | Audio | Photo | Video</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--This is where the CSS comes from. -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#"><img src="img/logo5.png"></a>
</div>
<!-- Collect Nav Content -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div><!--END NAVBAR COLLAPSE-->
</nav>
<div class="row text-center">
<h1>THIS IS CONTRA CODA</h1>
<h3>where the music never ends</h3>
LEARN MORE
</div>
</div>
</div>
<!--END JUMBOTRON-->
<div class="whatsnew">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="img/levelup.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive" src="img/heartwhole.jpg" alt="">
</div>
</div>
</div>
</div>
<!--END WHATS NEW-->
<div class="services">
<div class="container">
<div class="row">
<div class="services-audio text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-headphones"> </span>
<h4>AUDIO</h4>
<p>We believe in good, thoroughly crafted recording and mixing with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
<div class="services-photo text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-camera"> </span>
<h4>PHOTO</h4>
<p>We believe in good, thoroughly crafted recording with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
<div class="services-video text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-facetime-video"> </span>
<h4>VIDEO</h4>
<p>We believe in good, thoroughly crafted recording with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
</div>
</div>
</div>
<!--END SERVICES-->
<div class="clients">
<div class="heading">
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<h1>Clients</h1>
</div>
<div class="col-md-6 text-center">
see more
</div>
</div>
</div>
</div>
<!--END HEADING-->
<div class="gallery">
<!--GALLERY START-->
<div class="galleryinner">
<img src="img/clients/ivey.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>IVEY</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/rufus.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>RUFUS DAWKINS</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/seddymac.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>SEDDY MAC</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/lomax.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>MELISSA LOMAX</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/jeremy.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>JEREMY WILLIAMS</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/echoing.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>WHEN ALL KEPT ECHOING</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/delisle.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>RAISTLIN DELISLE</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
</div>
<!--END GALLERY-->
</div>
<!---END CLIENTS-->
<div class="firstcontact">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="email text-center">
<span style="font-size: 30px" class="glyphicon glyphicon-envelope"> </span>
<h5>EMAIL</h5>
<p>layne#contracoda.com</p>
</div>
</div>
<div class="col-md-8">
<div class="social text-center">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-twitter"> </span>
<span class="icon-sprite sprite-soundcloud"> </span>
</div>
</div>
</div>
</div>
</div>
<!---END FIRST CONTACT-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<div class="copyright">
<small>© 2017 CONTRA CODA MEDIA</small>
</div>
</div>
<div class="col-md-6 text-center">
<div class="design">
<small>WEB DESIGN BY DISMANTLE DESIGN</small>
</div>
</div>
</div>
</div>
</footer>
<!---END CLIENTS-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
On line 82 you are using a square bracket [ instead of an squiggle {, swap this and it will work:
.navbar-default .navbar-nav>li>a:hover {
This basically makes everything after the error not work, thus why your background wont change :) Also your background image will not change unless it looks the line looks like this (line 110):
background: #363737 url(../img/tempjumbotron.jpg) no-repeat;
Koda
I have a bit of an issue with a site I am creating. I need an alternative of float: left; for these icons. below I will upload two screenshots of the mobile screen and the computer screen.
Computer Size
Mobile Size
This is my code:
.featureIcon {
width: 70px;
float: left;
}
.featureRowSplit {
padding-bottom: 30px;
padding-top: 20px;
}
.featureText {
font-family: 'Lato', sans-serif;
color: #146eff;
margin-left: 80px;
}
<div class="row">
<div class="col-md-8">
<div class="row featureRowSplit">
<div class="col-md-4">
<img src="img/FeatureIcons/1.png" class="featureIcon">
<h3 class="featureText">Cheap</h3>
</div>
<div class="col-md-4">
<img src="img/FeatureIcons/2.png" class="featureIcon">
<h3 class="featureText">Friendly</h3>
</div>
<div class="col-md-4">
<img src="img/FeatureIcons/3.png" class="featureIcon">
<h3 class="featureText">Clean Code</h3>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="img/FeatureIcons/4.png" class="featureIcon">
<h3 class="featureText">Quick</h3>
</div>
<div class="col-md-4">
<img src="img/FeatureIcons/5.png" class="featureIcon">
<h3 class="featureText">Helpful</h3>
</div>
<div class="col-md-4">
<img src="img/FeatureIcons/6.png" class="featureIcon">
<h3 class="featureText">Reliable</h3>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
Best Regards,
Ben J
Do want them to align in one column? If so, you can set the whole thing in an unordered list and put the image and header in there. For the css, put list-style-type:none;for the unordered list, and put display:block;and float:left; for the actual li elements.
Hey StackOverFlow Community,
I need to get these images touching together. They will eventually be much larger and touching the edge of the browser. These will be tiles that lead to examples of film work, currently have placeholder images.
I have tried and tried to get these images touching, but I'm not sure what is going on... set the margin and padding to 0.
Here is the code.
HTML
<section id="video-section" class="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Video Production</h2>
<hr class="small">
</div>
<div class="container-fluid full-width has-inner">
<div class="row row-no-gutter">
<div class="col-md-4 nogut">
<div id="image1" class="video-item">
<a href="https://vimeo.com/208403633">
<img id="portfolio1" class="img-full-width" src="img/image1.jpg">
</a>
</div>
</div>
<div class="col-md-4 nogut">
<div id="image2" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image2.jpg">
</a>
</div>
</div>
<div class="col-md-4 nogut">
<div id="image3" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image3.jpg">
</a>
</div>
</div>
</div>
<div class="row row-no-gutter">
<div class="col-md-4">
<div id="image4" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image4.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div id="image5" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image5.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div id ="image6" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image6.jpg">
</a>
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
CSS
#video-section {
padding: 10px;
background: #353030;
color: white;
}
.containter-fluid .full-width {
padding-left: 0px;
padding-right: 0px;
overflow-x: hidden;
}
.row .row-no-gutter {
margin: 0px;
padding: 0px;
}
.nogut {
margin: 0px;
}
.img-full-width {
width: 100.5%;
height: auto;
}
Been spending a few hours trying to figure this out, what am I doing wrong?
Paddings are not on rows but on cols.
And it's not margin, so you .nogut will not work :)
You had almost the right answer, try this :
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
Then in your html :
<div class="row no-gutter">
First, right click in browser and use inspect (I think it is best in chrome.) Klick on this icon. Hover over your images and you will able to see which element the gap belongs to. When clicking the element you can in the styles section untick (and add) different css properties and see what happens. Very powerfull tool.
For you, I would also recommend to add padding: 0px; to .nogot and add that class to the second row also.