Develop Reference

I am having GooglePlacesAutocomplete focus Issue

Hello I have used google dropdown in my react project and need to handle event on focus of the dropdown I couldn't make it can you help me?
As you can see in below output there is a div placeholder which i need to hide on focus. I have tried a few ways but it didn't work so I need some expert help. I am stuck in here.
code
<GooglePlacesAutocomplete
apiKey={'XXXXXXX'}
selectProps={{
value,
backspaceRemovesValue: true,
controlShouldRenderValue: true,
isClearable: true,
placeholder: strings["SELECT_LOCATION"],
onChange: async (e) => {
console.log("E : ", e);
setValue(e)
if (e) {
let location = await getLocationAction(e.value?.place_id)
let address = {
address: e.label,
location
}
getLocation && getLocation(address)
} else {
getLocation(null);
}
}
}
}
/>
Output
<div class="googleDropdown">
<div class="css-2b097c-container">
<span
aria-live="polite"
aria-atomic="false"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
></span>
<div class="css-yk16xz-control">
<div class="css-1hwfws3">
<div class="css-1wa3eu0-placeholder">Select location</div>
<div class="css-1g6gooi">
<div class="" style="display: inline-block">
<input
autocapitalize="none"
autocomplete="off"
autocorrect="off"
id="react-select-3-input"
spellcheck="false"
tabindex="0"
type="text"
aria-autocomplete="list"
value=""
style="
box-sizing: content-box;
width: 2px;
background: 0px center;
border: 0px;
font-size: inherit;
opacity: 1;
outline: 0px;
padding: 0px;
color: inherit;
"
/>
<div
style="
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
height: 0px;
overflow: scroll;
white-space: pre;
font-size: 16px;
font-family: Comfortaa, Montserrat, sans-sarif;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
text-transform: none;
"
></div>
</div>
</div>
</div>
<div class="css-1wy0on6">
<span class="css-1okebmr-indicatorSeparator"></span>
<div class="css-tlfecz-indicatorContainer" aria-hidden="true">
<svg
height="20"
width="20"
viewBox="0 0 20 20"
aria-hidden="true"
focusable="false"
class="css-tj5bde-Svg"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
></path>
</svg>
</div>
</div>
</div>
</div>
</div>
code

Why don't the textfields and buttons in my div react to clicks?

For school homework, I'm creating a single page with another student. Our teacher gave us an HTML-File to clone some of the components for our own project, so that we don't have to write it from scratch. We want to create our own .js file with some listeners for the components we take from her file.
The below code produces a label called "keywords" with a question mark icon to its right and a text field further right. A click on the question mark icon opens a popup window with some options and the text field allows comma-separated strings as "keywords". Our problem is that on our HTML-Page, all these elements show up with no problem, but the popup window won't show up when we click on the question mark icon and the text field is also not activated when we click on it.
We looked at our teacher's HTML file and played on it a bit. We found out, that when we remove her js file as a script the same thing happens on her HTML file too. So we looked into her js file and checked the 55.000 lines long js file for some reference to these elements and found nothing. So we don't know, why ours doesn't work. The console shows no errors in the output when we open our HTML file. How can we make these elements respond to clicks? where should we look for errors, mistakes?
<div class="form-group">
<label class="control-label col-md-4 col-lg-3" for="offer_tag_list">
<div class="inline-help form-label" data-help="<b>You would like to use keywords:</b> In that case use one or more words for each keyword and use a comma to seperate.
br>
<b>You want to remove a keyword?</b> Then click on the <i class="fa fa-remove"></i> symbol at the end of that keyword.
<div class="panel panel-default" id="feedback-form">
<div class="panel-heading">
<h4 class="panel-title">
<i class="fa fa-question-circle"></i> Was that information useful? </h4>
</div>
<div class="panel-body">
<form class="feedback" role="form" id="new_feedback" action="/feedbacks" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="&#x2713;" />
<div class="form-group"><textarea placeholder="You can write comments here." class="form-control" name="feedback[comment]" id="feedback_comment">
</textarea></div>
<input type="hidden" value="/offers/new" name="feedback[context]" id="feedback_context" />
<input type="hidden" value="offers.tag_list" name="feedback[help_key]" id="feedback_help_key" />
<div class="actions"> <input type="submit" name="feedback[helpful]" value="Ja" class="btn btn-default" data-disable-with="Ja" /> <input type="submit" name="feedback[helpful]" value="Nein" class="btn btn-default" data-disable-with="Nein" /></div></form> <div class="hidden response">
Thank you for your Feedback!
</div>
</div>
</div>
" data-heading="How to use keywords?" data-help-key="offers.tag_list">
<i class="fa fa-question-circle-o"></i>
</div>Keywords
</label>
<div class="col-md-8 col-lg-9">
<div class="bootstrap-tagsinput">
<span class="twitter-typeahead" style="position: relative; display: inline-block;">
<input type="text" class="tt-hint" readonly="" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">
<input type="text" placeholder="" class="tt-input" spellcheck="false" dir="auto" aria-activedescendant="" aria-owns="undefined_listbox" role="combobox" aria-readonly="true" aria-autocomplete="list" style="">
<span role="status" aria-live="polite" style="position: absolute; padding: 0px; border: 0px; height: 1px; width: 1px; margin-bottom: -1px; margin-right: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap;"></span>
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
<div role="listbox" class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
<div role="presentation" class="tt-dataset tt-dataset-tags"></div>
</div>
</span>
</div>
<input value="" data-use-tagsinput="true" class="form-control" type="text" name="offer[tag_list]" id="offer_tag_list" style="display: none;">
</div>
</div>

Bootstrap responsive on 21 inches screen

I'm doing a small project using Bootstrap. Now I come across a responsive problem, wish someone can help me out.
First and most important problem is: when this web page shown on a 21 inches screen, the layout is totally broken. I tried to adjust the 'lg-col=x', but it still doesn't work.
Similarly, when I show it on a narrow screen, the button doesn't laid nicely.
<!-- Down payment calculation -->
    
function downpayment()     {
var pvalue = document.formval.p_value.value;
var down = Math.ceil(pvalue * 0.6);
document.formval2.field1.value = ("The down payment is " + "$" + down.toFixed(0));    
} 
<!-- Monthly payment calculation -->
    
function monthly()     {        
var pvalue = document.formval.p_value.value; // pick the form input value (property value)
        
var rate = document.formval.int_rate.value; // pick the form input value (interest rate)
        
var t = document.formval.period.value; // pick the form input value (tenure)
var loan = pvalue * 0.4;        
var r = rate / 100 / 12; // to calculate monthly rate
        
var monthly = (loan * r * Math.pow((1 + r), t * 12)) / (Math.pow((1 + r), t * 12) - 1);
if (monthly.toFixed(0) == "Infinity") {
document.formval3.field2.value = ("Please complete the input");
} else if (monthly.toFixed(0) == "NaN") {
document.formval3.field2.value = ("Please complete the input");
} else {
document.formval3.field2.value = ("The monthly payment is: " + "$" + monthly.toFixed(0));
}    
}  
<!-- Total amount calculation -->
    
function total()     {        
var pvalue = document.formval.p_value.value; // pick the form input value (property value)
        
var rate = document.formval.int_rate.value; // pick the form input value (interest rate)
        
var t = document.formval.period.value; // pick the form input value (tenure)
var loan = pvalue * 0.4;        
var r = rate / (12 * 100); // to calculate rate percentage..
        
var monthly = (loan * r * Math.pow((1 + r), t * 12)) / (Math.pow((1 + r), t * 12) - 1);
// to calculate compound interest..
        
var total = monthly * 12 * t + pvalue * 0.6 + 650;
if (total.toFixed(0) == "NaN") {
document.formval4.field3.value = ("Please complete the input");
} else {
document.formval4.field3.value = ("The total amount is: " + "$" + total.toFixed(0));
}
    
}
<!-- JQ effect -->
$(function() {
$("#Calculated").click(function() {
$("[name='field1']").show(1000)
})
})
$(function() {
$("#monthly-Calculate").click(function() {
$("[name='field2']").show(1000)
})
})
$(function() {
$("#sum").click(function() {
$("[name='field3']").show(1000)
})
})
$(function() {
$("#Reset").click(function() {
$("[name='field3']").slideUp(1000)
$("[name='field2']").slideUp(1000)
$("[name='field1']").slideUp(1000)
})
})
.jumbotron {
position: relative;
background: #000 url("https://s14.postimg.org/brfoy05nl/homeloan.jpg") center center;
width: 100%;
height: 230px;
background-size: contain;
overflow: hidden;
}
h2 {
padding-top: 30px;
font-size: 50px;
text-shadow: 1px 1px 2px white;
}
form {
margin-top: 35px;
margin-left: 80px;
}
body {
background-image: url(https://images.unsplash.com/photo-1473181488821-2d23949a045a?dpr=1&auto=format&fit=crop&w=767&h=511&q=80&cs=tinysrgb&crop=);
background-size: cover;
}
label {
display: initial;
font-weight: normal;
padding-right: 40px;
text-shadow: 1px 1px 1px grey;
}
.input-group {
padding-top: 10px;
}
.btn-primary {
color: #fff;
background-color: #413ba0;
border-color: black;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #775858;
}
.btn-success {
color: #fff;
background-color: #83a03b;
border-color: black;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open>.dropdown-toggle.btn-success {
color: #fff;
background-color: #775858;
}
.btn-info {
color: #fff;
background-color: #a03b97;
border-color: black;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
color: #fff;
background-color: #775858;
}
.btn-warning {
color: #fff;
background-color: #d63e3e;
border-color: black;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open>.dropdown-toggle.btn-warning {
color: #fff;
background-color: black;
}
.btn {
font-size: 13px;
text-shadow: 1px 3px 3px black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Anmei International</title>
<link rel="icon" href="https://www.iconexperience.com/_img/g_collection_png/standard/512x512/currency_dollar.png" />
<link href="http://pg.gaarsam.com//html/assets/bootstrap/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Arimo:400i|PT+Sans" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body style="font-family: 'Montserrat Light', sans-serif;">
<div class="jumbotron text-center">
<h2 style="color:White; font-family: 'PT Sans', sans-serif; font-size: 60px;">Property Investment Calculator</h2>
</div>
<!-- Input form -->
<form name="formval" class="form-horizontal" style="font-size:20px; color: black; font-family: 'PT Sans', sans-serif; width: 50%; margin-left: 25%">
<!-- Property Value -->
<div class="form-group" style="padding-bottom: 0.5%">
<label for="input" class="control-label" style="font-weight: bold">Property Value</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control input-sm" id="property_value" name="p_value" placeholder="Please input property price" style="font-family: 'PT Sans', sans-serif; font-size: 16px;">
</div>
</div>
<!-- Loan Tenure -->
<div class="form-group" style="padding-bottom: 0.5%">
<label for="input" class="control-label" style="font-weight: bold">Loan Tenure</label>
<div class="input-group">
<!-- 15 years -->
<label style="color: #962121; font-weight: bold; margin-right: 5%;">15 years
<input type="radio" id="fifteen_years" name="period" value="15" style="font-family: 'PT Sans', sans-serif; font-size: 16px; margin-left: 3%;" onclick="getValue(this)" required="">
</label>
<!-- 30 years -->
<label style="color: #962121; font-weight: bold;">30 years
<input type="radio" id="thirty_years" name="period" value="30" style="font-family: 'PT Sans', sans-serif; font-size: 16px; margin-left: 3%;" onclick="getValue(this)">
</label>
</div>
</div>
<!-- APR -->
<div class="form-group" style="padding-bottom: 0.5%">
<label for="input" class="control-label" style="font-weight: bold">Annual Percentage Rate</label>
<div class="input-group">
<input type="text" class="form-control input-sm" id="idROI" name="int_rate" style="font-family: 'PT Sans', sans-serif; font-size: 16px;">
<span class="input-group-addon">%</span>
</div>
</div>
<!-- button -->
<div class="form-group">
<!-- Downpayment -->
<button type="button" id="Calculated" name="calculate" value="downpayment" onclick="downpayment()" class="btn btn-primary col-lg-3 col-md-10 col-sm-10" style="margin-right: 2%; padding: 5px;">Calculate down payment</button>
<!-- Monthly payment -->
<button type="button" id="monthly-Calculate" name="calculate" value="monthly" onclick="monthly()" class="btn btn-success col-lg-3 col-md-10 col-sm-10" style="margin-right: 2%; padding: 5px;">Calculate monthly payment</button>
<!-- Total -->
<button type="button" id="sum" name="calculate" value="toal" onclick="total()" class="btn btn-info col-lg-3 col-md-10 col-sm-10" style="margin-right: 12%; padding: 5px;">Calculate total amount</button>
<!-- Reset -->
<button type="reset" id="Reset" class="btn btn-warning col-lg-1 col-md-10 col-sm-10" style="padding: 5px;">Reset</button>
</div>
</form>
< <!-- Output form -->
<!-- Down payment output -->
<form name="formval2" class="form-horizontal col-lg-3 col-md-10 col-sm-10">
<div class="form-group">
<output name="field1" style="display:none; font-size:20px; padding:10px; text-align: center; font-family: 'Arimo', sans-serif; color: black; background-color: white; border-radius: 25px; text-shadow: 1px 1px 1px grey;"></output>
</div>
</form>
<!-- Monthly payment output -->
<form name="formval3" class="form-horizontal col-lg-3 col-md-10 col-sm-10">
<div class="form-group">
<output name="field2" style="display:none; font-size:20px; padding:10px; text-align: center; font-family: 'Arimo', sans-serif; color: black; background-color: white; border-radius: 25px; text-shadow: 1px 1px 1px grey;"></output>
</div>
</form>
<!-- Total amount output -->
<form name="formval4" class="form-horizontal col-lg-3 col-md-10 col-sm-10">
<div class="form-group">
<output name="field3" style="display:none; font-size:20px; padding:10px; text-align: center; font-family: 'Arimo', sans-serif; color: black; background-color: white; border-radius: 25px; text-shadow: 1px 1px 1px grey;"></output>
</div>
</form>
<script type="text/javascript" src="http://pg.gaarsam.com//html/assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://pg.gaarsam.com//html/assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://pg.gaarsam.com//html/assets/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="english.js"></script>
</body>
</html>

As I said in the comment, I'm not 100% sure of what you are calling broken.
You can upload an image to imgur, then embed the link in your post.
As for your button issue I'm not sure what you are referring to, but one thing to try is to wrap your col classes in a parent .row div

Can't get show/hide to repeat on a menu item after first click

I am attempting to repeat a show/hide command on a div in a little navigation menu I am creating. I can get the show/hide to work once on all four buttons, but I can't get it to repeat if I were to click the same button three times. It simply adds the active class, but doesn't hide the remaining div's again. I want the action that clicking and unclicking the div has to work every time forever.
JS Fiddle here: https://jsfiddle.net/c3md14jf/
HTML:
<div class="mobile-container">
<div class="mobile-row">
<a href="#fa">
<div class="mobile-square">
<i class="fa fa-globe" style="font-size:48px;" aria-hidden="true"></i>
<p>
Foreign Affairs
</p>
</div>
</a>
<a href="#travel">
<div class="mobile-square">
<i class="fa fa-plane" style="font-size:48px;" aria-hidden="true"></i>
<p>
Travel
</p>
</div>
</a>
</div>
</div>
<div class="mobile-container">
<div class="mobile-row">
<a href="#dev">
<div class="mobile-square">
<i class="fa fa-code" style="font-size:48px;" aria-hidden="true"></i>
<p>
Development
</p>
</div>
</a>
<a href="#misc">
<div class="mobile-square">
<i class="fa fa-heart" style="font-size:48px;" aria-hidden="true"></i>
<p>
Fitness
</p>
</div>
</a>
</div>
</div>
CSS:
#import url('https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu|Montserrat');
body {
color: #008fc5;
background-color: #fff;
}
p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 22px;
margin: 0;
}
i {
padding-top: 10px;
padding-bottom: 5px;
}
.mobile-container a {
text-decoration: none;
}
.mobile-row {
width: 100%;
margin-top: 5px;
}
.mobile-square {
width: 49%;
height: auto;
min-height: 95px;
color: #fff;
background-color: #008fc5;
text-align:center;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
position:relative;
}
.mobile-square p {
font-family: 'Montserrat', sans-serif;
}
.active {
background-color: #004762;
}
JS:
var mobileSquare = $(".mobile-square");
mobileSquare.click(function(){
var activeSquare = $(this);
activeSquare.toggleClass("active");
mobileSquare.not(activeSquare).hide();
activeSquare.click(function(){
mobileSquare.not(activeSquare).show();
});
});

So I only changed the on("click", function(){...}) handler, so that rather than using show/hide i'm using toggle. By doing this, I don't have to have the click handler for the activeclass. I suspect that may have been part of the problem.
var mobileSquare = $(".mobile-square");
mobileSquare.on("click", function(){
var activeSquare = $(this);
activeSquare.toggleClass("active");
mobileSquare.not(activeSquare).toggle();
});
/* General Rules */
/* <link href="https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu" rel="stylesheet">
font-family: 'Open Sans', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'PT Sans', sans-serif;
font-family: 'Ubuntu', sans-serif;
font-family: 'Exo', sans-serif;
font-family: 'Quicksand', sans-serif;
*/
#import url('https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu|Montserrat');
body {
color: #008fc5;
background-color: #fff;
}
p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 22px;
margin: 0;
}
i {
padding-top: 10px;
padding-bottom: 5px;
}
.mobile-container a {
text-decoration: none;
}
.mobile-row {
width: 100%;
margin-top: 5px;
}
.mobile-square {
width: 49%;
height: auto;
min-height: 95px;
color: #fff;
background-color: #008fc5;
text-align:center;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
position:relative;
}
.mobile-square p {
font-family: 'Montserrat', sans-serif;
}
.active {
background-color: #004762;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/670a0bbb85.js"></script>
<div class="mobile-container">
<div class="mobile-row">
<a href="#fa">
<div class="mobile-square">
<i class="fa fa-globe" style="font-size:48px;" aria-hidden="true"></i>
<p>
Foreign Affairs
</p>
</div>
</a>
<a href="#travel">
<div class="mobile-square">
<i class="fa fa-plane" style="font-size:48px;" aria-hidden="true"></i>
<p>
Travel
</p>
</div>
</a>
</div>
</div>
<div class="mobile-container">
<div class="mobile-row">
<a href="#dev">
<div class="mobile-square">
<i class="fa fa-code" style="font-size:48px;" aria-hidden="true"></i>
<p>
Development
</p>
</div>
</a>
<a href="#misc">
<div class="mobile-square">
<i class="fa fa-heart" style="font-size:48px;" aria-hidden="true"></i>
<p>
Fitness
</p>
</div>
</a>
</div>
</div>

Better off using toggle instead of show/hide. Take a look to see if this points you in the right direction.
`https://jsfiddle.net/c3md14jf/1/`

On click scroll to div doesn't work

So I've got this simple setup of images and divs. On click of the div, the website should scroll down to another div. Everything seems alright but for some reason, it doesn't work. I've attached a jsfiddle to the bottom of the code.
Here's the code:
<div class="block-2">
<h4>Choose your coffee!</h4>
<div class="row row-centered">
<div class="col-xs-12 col-md-4 col-centered" >
<div class="scrollcezve">
<img src="img/cezve-2.png" class="hvr-grow img-round">
</div>
</div>
<div class="col-xs-12 col-md-4 col-centered" >
<img src="img/coffee-pot-heart.png" class="hvr-grow img-round" >
</div>
<div class="col-xs-12 col-md-4 col-centered">
<img src="img/espresso-cappuccino-machine.png" class="hvr-grow img-round" >
</div>
</div>
</div>
<div id="cezve">
<div class="row row-centered">
<div class="col-xs-6 col-lg-6" >
<img src="img/cezve.png">
</div>
<div class="col-xs-12 col-sm-6 col-lg-6" >
<h4>Cezve</h4>
<p>A cezve is a pot designed specifically to make Turkish coffee. The body and handle are traditionally made of brass or copper, occasionally also silver or gold. Though, recently, cezveler are also made from stainless steel, aluminium, or ceramics. The long handle is particularly useful to avoid burning one's hands, and the brim is designed to serve the coffee. <br>
The name cezve is of Turkish origin, where it is a borrowing from Arabic: جذوة‎ "ember".
Other regional variations of the word cezve are jezve and čezve. In Ukrainian and Russian, the word is spelled джезва (where it exists alongside турка, IPA: [ˈturkə]). In Bosnia and Herzegovina, Serbia, Croatia, Slovenia and Czech Republic it is a long-necked coffee pot, spelled "džezva".</p>
</div>
</div>
.block-2 {
height: auto;
background-color: #795548;
text-align: center;
}
.block-2 img {
height: 250px;
width: 250px;
padding: 20px;
}
.block-2 h4 {
color: #fff;
font-family: 'Lily Script One', cursive;
font-size: 30px;
margin: 0;
padding: 10px 10px;
text-align: center;
}
#cezve {
height: auto;
background-color: #C59989;
}
#cezve img {
padding: 20px 20px;
height: 400px;
width: 550px;
}
#cezve p {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
padding: 10px 50px 0px 0px;
}
#cezve h4 {
color: #fff;
font-family: 'Lily Script One', cursive;
font-size: 50px;
margin: 0;
padding-top: 20px;
}
$(".scrollcezve").click(function() {
$('html, body').animate({
scrollTop: $("#cezve").offset().top
}, 2000);
});
https://jsfiddle.net/qpr0vd4y/1/
By clicking on the div scrollcezve ( or the image cezve-2png ) it should scroll down to #cezve, but it isn't working.

Be sure you are including jQuery in the <head> of your document. The fiddle you provided had it included in the HTML window. If you move it into the external resources section, everything works.