(sorry for my bad English, it's not my first language)
I'm working on this website: http://www.smartandwise.co.kr/home/
It's working well on a desktop browser, but one element is not working on mobile.
left: desktop view <-- --> right: mobile view
I'm using <meta name="viewport" content="width=device-width, initial-scale=1.0">
And
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-PV4KQ8"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
#home > .carousel-inner > .bg1 {
background-image: url('../img/home_picture5.jpg');
background-position: 100% 100%;
background-size: cover;
border-radius: 0%;
opacity: 1;
filter: blur(0px);
}
#home > .carousel-inner > .item {
height: 900px !important;
border-radius: 0%;
opacity: 1;
filter: blur(0px);
box-shadow: none;
}
#home > .carousel-inner > .item > .container > .carousel-caption {
top: 10%;
width: 100%;
left: 0;
}
#home > .carousel-inner > .item > .container > .carousel-caption > h1 {
font-family: 'NBG-bold';
font-size: 30px;
text-shadow: none;
color: #4eae49;
font-weight: bold;
}
#home > .carousel-inner > .item > .container > .carousel-caption > p {
font-family: 'NBG-light';
font-size: 45px;
text-shadow: none;
}
#home > .carousel-indicators {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
top: 100%;
bottom: 0;
}
#home > .container {
position: absolute;
width: 100%;
z-index: 10;
top: 35%;
margin: 0;
padding: 0;
text-align: center;
}
#home > .container > .row {
width: 75%;
margin: 0 auto;
color: #ffffff;
}
#home > .container > .row > div.col-lg-4 > img.img-circle {
transition: all 0.3s ease-in-out;
transform: translateY(0px);
border-radius: 0% !important;
}
#home > .container > .row > div.col-lg-4 > img.img-circle:hover {
transform: translateY(-50px);
}
#home > .container > .row > div.col-lg-4 > div.title {
width: 250px;
height: 46px;
margin: 0 auto 16px auto;
}
#home > .container > .row > div.col-lg-4 > div.title > div.bg {
z-index: -1;
position: absolute;
width: 250px;
height: 46px;
background-color: #FFB000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=15);
opacity: 0;
}
#home > .container > .row > div.col-lg-4 > div.title > h2 {
padding-top: 7px;
color: #FFB000;
font-weight: regular;
}
#home > .container > .carousel-indicators {
position: relative;
padding-top: 0;
padding-bottom: 0;
margin-top: 16px;
margin-bottom: 0;
top: 0;
bottom: 0;
}
@media (max-width: 899px) {
#home > .carousel-inner > .item > .container > .carousel-caption > p {
font-size: 32px;
}
}
@media (max-width: 768px) {
#home > .carousel-inner > .item > .container > .carousel-caption {
width: 100% !important;
height: auto;
}
#home > .carousel-inner > .bg1 {
background-size: auto;
background-repeat: no-repeat ;
}
#home > .carousel-inner > .item > .container > .carousel-caption > p {
font-size: 25px;
}
}
@media (min-width: 1200px) {
#home {
height: 600px !important;
}
#home > .container {
top: 70%;
}
#home > .carousel-inner > .item > .container > .carousel-caption {
top: 10%;
backdrop-filter: blur(0px);
}
#home > .carousel-inner > .item > .container > .carousel-caption > h1,
#home > .carousel-inner > .item > .container > .carousel-caption > p {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
#home > .carousel-inner > .item > .container > .carousel-caption > h1.init {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;<!-- Home --><div id="home" class="carousel slide" data-ride="carousel"><!-- Background Images --><div class="carousel-inner" role="listbox"><div class="item active bg1 ball"><div class="container"><div class="carousel-caption col-lg-6"><h1>Grow With You</h1><div class="divider2 text-center"><span></span></div><p>스마트앤와이즈는 연결중심의 미래 교육을 위한 </br>지능형 학습 시스템 솔루션을 제공합니다. </p></div></div></div></div><!-- Circular Images --><div class="container"><div class="row"><div class="col-lg-4"><img class="img-circle" src="img/icon8.png" alt="home-complete"><div class="title"><div class="bg"></div><h2>미래 학습 환경</h2></div><p>미래 환경에 요구되는 학습 시스템 및<br/>도구를 직접 개발 합니다.
</p></div><div class="col-lg-4"><img class="img-circle" src="img/icon9.png" alt="home-24h"><div class="title"><div class="bg"></div><h2>학습자 중심 시스템</h2></div><p>다양한 학습자의 수준과 경험을<br/>고려한 환경을 개발합니다
</p></div><div class="col-lg-4"><img class="img-circle" src="img/icon10.png" alt="home-speed"><div class="title"><div class="bg"></div><h2>지능형 시스템</h2></div><p>학습 데이터 기반<br/>학습 멘토 인공지능 기술을 개발합니다.
</p></div></div><ol class="carousel-indicators"><li data-target="#home" data-slide-to="0" class="active"></li></ol></div></div>This is the code been used on the part that's making problem.
Please help