Website responsive on desktop but not on mobile

Question

(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

Answer 1

It looks like you can solve your problem by adding this rule:

.navbar,
#home > .carousel-inner > .item {
    width: 100vw;
}

And it looks like you might need some further tweaks for those glowing particles on certain screen sizes.

Answer 2

try

    background: url("../assets/images/admission/fototron_header.png")
      no-repeat center;
    background-size: cover;

common problem is the size picture that not set in viewport mobile, that make overflow to page, make sure to set overflowX:hidden; to some container that have big picture or you can make ```

width:100%;
height:auto;