We Keep Coding

Need help removing or hiding divs depending on screen width

So I was having trouble with changing a 3x3 image gallery layout on any screen > than 768px (tablet/desktop) to an image slider for any screen < than 768px (mobile).
After the help of everyone and especially Danilo (solutions in the comments), the problem was that the css was not correctly targetting the screen, I needed - #media only screen, I had also missed a DIV... (I know noob error).
So if anyone is trying to change the content displayed from desktop layout to mobile layout in Bootstrap 4, you can use CSS media queries that target the wrapped DIV to display or not display.
Updated working snippet below:
#media only screen and (min-width: 768px) {
.slider {
display: none;
}
.block {
display: block;
}
}
#media only screen and (max-width: 768px) {
.slider {
display: block;
}
.block {
display: none;
}
}
.hold-tests {
display: flex;
width: 100%;
}
.col {
flex: 1;
}
<!--- Start of Gallery Section -->
<div id="hold-tests">
<div class="col slider">
<div id="sliderIndicators" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel" data-interval="9000">
<div class="carousel-inner col-" role="listbox">
<!--- First Slide -->
<div class="carousel-item active">
<img src="Img/PHportrait.png" alt="background image">
</div>
<div class="carousel-item">
<img src="Img/PHportrait2.png" alt="background image">
</div>
<div class="carousel-item">
<img src="Img/PHportrait.png" alt="background image">
</div>
</div>
<div class="narrow">
<div class="col-12">
<p class="lead text-center">Want to see more of my work?</p>
<!-- add in social media icons and add target="_blank" to open in new tab -->
</div>
</div>
</div>
</div>
<div class="col block">
<div id="gallery" class="offset">
<div class="col-md">
<div class="row no-padding">
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
<div class="col-md-4">
<div class="gallery-card">
<a href="Img/PHportrait.png" target="_blank">
<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
</a>
</div>
</div>
</div>
</div>
<div class="narrow">
<div class="col-12">
<p class="lead text-center">Want to see more of my work?</p>
<!-- add in social media icons and add target="_blank" to open in new tab -->
</div>
</div>
</div>
</div>
</div>
<!--- End of Gallery Section -->

Since you're using bootstrap, use it. No jQuery needed for this, as it's completely covered already.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-none d-md-block">
Only visible starting from md
</div>
<div class="d-md-none">
Only visible on small screen
</div>
https://getbootstrap.com/docs/4.0/utilities/display/
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
Also note that ids usually don't start with a #. Even though this may be legal, you'd then at least had to select them with $('##option1') in your jquery code.

You can do that, just using CSS
html
<div class="hold-tests">
<div class="col test1">Test1</div>
<div class="col test2">Test2</div>
<div class="col test3">Test3</div>
</div>
css
#media only screen and (min-width: 768px) {
.test1 {
display: none;
}
.test3 {
display: block;
}
}
#media only screen and (max-width: 768px) {
.test3 {
display: none;
}
}
.hold-tests {
display: flex;
width: 100%;
}
.col {
flex: 1;
}

Element moving slower when scrolling while using Butter Scroll

How can I make an element (element id #move-slower) move slower than the speed of the butter scroll container? My goal is to place this element somewhere behind the main container with the page content (which will use butter scroll) and have it move slower when scrolling than the container controlled by butter scroll.
I'm open to using other jQuery plugins other than butter scroll as long as I can achieve the same effect of this plugin.
Using:
https://github.com/cmalven/butter-scroll
HTML
<div class="outer-container js-outer-container">
<div class="inner-container js-inner-container">
<div id="slower-element"><img src="https://via.placeholder.com/100x300.png/09f/fff" alt=""></div>
<div class="container">
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
</div>
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
</div>
</div>
</div>
</div>
JS
new ButterScroll({
$containerEl: jQuery('.js-outer-container'),
$elToScroll: jQuery('.js-inner-container'),
scrollEase: 0.07, // optional
maxDepthOffset: 500 // optional
});
CSS
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.inner-container {
overflow: hidden;
}
img {
max-width:100%;
height:auto;
}
#slower-element {
position:fixed;
top:0;
left:0;
}
Fiddle
https://jsfiddle.net/ts7j3n5z/

How to fix this in jquery?

I have a 3 x 4 cards, it's a memory game. So to able to play, you need to guess 2 matches.
$('.card').click(function() {
$('.front').toggle();
$('.back').toggle();
});
.card .back {
display: none;
}
.card {
margin: 8px;
}
.card .front {
background-color: blue;
}
.back,
.front {
color: white;
width: 100px;
height: 150px;
}
.card .back {
background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>
Based from the snippet, if I click a one card, all of the cards flipped, which is wrong.
Now my problem is, how do I fix this through jquery?

What you're doing wrong is that you're targeting every single element with the class front and back, because of your selectors (.front and .back).
To fix this, you need to tell jQuery that you're targeting only the elements within the element the user just clicked, and for that you use the find function. This makes sure that jQuery checks just the elements in the one you target in and not every single element in the document.
So, where you wrote:
$('.card').click(function(){
$('.front').toggle();
$('.back').toggle();
});
You need to change it to
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
Simple as that.
$('.card').click(function() {
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
.card .back {
display: none;
}
.card {
margin: 8px;
}
.card .front {
background-color: blue;
}
.back,
.front {
color: white;
width: 100px;
height: 150px;
}
.card .back {
background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>

$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
That's it

You need to use this to select only some elements with this class. Try this $(this).find(".front").toggle().

Use this:
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});

You selected with jQuery all the .front and all .backclasses, you should use that :
$('.card').click(function(){
var $this = $(this);
$this.find('.front').toggle();
$this.find('.back').toggle();
});

When you do
$('.card').click(function() {
$('.front').toggle();
$('.back').toggle();
});
You attach a click listener to all elements with class card. Inside, you toggle all elements with class front and back. You need to be toggling just the front and back that are inside the clicked card. $(this).find(".front").toggle(); does just that.

Simply Read Here
$('.front , .back' , this).toggle();
$('.card').click(function(){
$('.front , .back' , this).toggle();
});
.card .back{
display:none;
}
.card {
margin:8px;
}
.card .front{
background-color: blue;
}
.back, .front{
color:white;
width:100px;
height:150px;
}
.card .back{
background-color:red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>

Why am I getting this behavior with my Bootstrap 3 carousel?

I am trying to achieve this effect with my own carousel which has a semi-transparent images on the right and left sides; but I am getting this bad effect with my own project when moving between slides : here.
Here is the HTML code that I wrote :
<header class="container">
<div class="row">
<div id="carousel1" class="carousel slide" data-ride="carousel"> <!--Carousel begin-->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-caption carouselTextBackground">
<h2>Hangars</h2>
</div>
<div class="slideRight hidden-xs">
<img src="images/carousel-home/Bridge - 1200 by 420.jpg" class="img-responsive">
</div>
<div class="slideLeft hidden-xs">
<img src="images/carousel-home/Frame - 1200 by 420.jpg" class="img-responsive">
</div>
<img src="images/carousel-home/Hangar - 1200 by 420.jpg" alt="First slide image" class="center-block img-responsive">
</div> <!-- end of item -->
<div class="item">
<div class="carousel-caption carouselTextBackground">
<h2>Bridges</h2>
</div> <!-- end carousel-caption -->
<div class="slideRight hidden-xs">
<img src="images/carousel-home/Frame - 1200 by 420.jpg" class="img-responsive">
</div>
<div class="slideLeft hidden-xs">
<img src="images/carousel-home/Hangar - 1200 by 420.jpg" class="img-responsive">
</div>
<img src="images/carousel-home/Bridge - 1200 by 420.jpg" alt="Second slide image" class="center-block img-responsive">
</div> <!-- end of item -->
<div class="item">
<div class="carousel-caption carouselTextBackground">
<h2>The Right Choice for the job</h2>
</div> <!-- end carousel-caption -->
<div class="slideRight hidden-xs">
<img src="images/carousel-home/Hangar - 1200 by 420.jpg" class="img-responsive">
</div>
<div class="slideLeft hidden-xs">
<img src="images/carousel-home/Bridge - 1200 by 420.jpg" class="img-responsive">
</div>
<img src="images/carousel-home/Frame - 1200 by 420.jpg" alt="Third slide image" class="center-block img-responsive">
</div> <!-- end of item -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
<a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>
</div>
</div> <!-- end row -->
</header> <!-- end container -->
and here is the CSS code :
#carousel1 {
position:relative;
}
.carousel-caption {
position:absolute;
right:0%;
bottom:0%;
left:0%;
z-index:999;
color:#fff;
text-align:left;
}
.carousel-caption h2 {
margin:0;
text-align:left;
color:#FFFFFF;
}
.carouselTextBackground {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: rgba(0,0,0,.4);
padding-left: 20px;
padding-top: 12px;
}
.slideRight {
position:absolute;
left:100%;
width:100%;
height:100%;
opacity:.5;
}
.slideLeft {
position:absolute;
right:100%;
width:100%;
height:100%;
opacity:.5;
}
.carousel-inner {
overflow:visible;
}
Please help me with this because it is bugging me very much... and just tell me the better way to do it and I am not asking you to do it for me. Thanks a lot.

One potential solution - set all images to lower opacity, then increase the opacity on the .active carousel item:
.carousel-inner>.item>a>img, .carousel-inner>.item>img {
opacity: 0.5;
}
.carousel-inner>.active {
opacity: 1;
}
This is untested, but it should work.

Javascript flipping the div with content

I have a page where there should be 2 rows, each containing two rectangular divs with content (image, h3 and paragraph). When clicking on the div, it has to flip in order to show its back content.
All the work is done with Bootstrap and the script is taken from
https://nnattawat.github.io/flip/.
The matter is simple yet impossible for me: those two rows stay on top of one another. All I need is for them to stay on different rows and be responsive.
This is my HTML:
<div class="container grid-container">
<div class="row">
<div class="card-grid col-md-6">
<div class="front">
<img src="images/1.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
<div class="card-grid col-md-6">
<div class="front">
<img src="images/2.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
</div>
<div class="row">
<div class="card-grid col-md-6">
<div class="front">
<img src="images/3.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
<div class="card-grid col-md-6">
<div class="front">
<img src="images/4.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
</div>
</div>
This is my CSS:
.card-grid{
perspective: 500px;
position:relative;
transform-style:preserve-3d;
}
.grid-container>.row>.card-grid>.front{
height:100%;
width:100%;
backface-visibility: hidden;
transform-style: preserve-3d;
position:absolute;
z-index:1;
transition:all 0.5s ease-out;
transform:rotateY(0deg);
}
.grid-container>.row>.card-grid>.back{
transform:rotateY(-180deg);
height:100%;
width:100%;
backface-visibility:hidden;
transform-style:preserve-3d;
position:absolute;
z-index:0;
transition:all 0.5s ease-out;
}
About CSS: I tried to make classes .front and .back less specific, then I tried to override Bootstrap's CSS file by making them more specific. No change.
And my main JS script is this:
$(function(){
$(".card-grid").flip({
trigger:"click"
});
});

I think below code helps you
Fiddle: https://jsfiddle.net/nadimsajib/bhx8fqvm/
HTML:
<div class="grid">
<div class="row">
<div id="card" class="card col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="front">
<img src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
<div style="height:500px;">
</div>
<div class="card col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="front">
<img src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
</div>
</div>
JS:
$(function($) {
$(".card").flip();
});