Мобильный интернет Samsung - неверная позиция, но работает на firefox - PullRequest
0 голосов
/ 17 октября 2018

Редактировать: я отправлю первое лицо, чтобы решить проблему 5 $ с помощью приложения для оплаты наличными.

редактировать: хорошо, здесь я добавил код.Если вы посмотрите на область с роботом, на оси Y есть пустое пространство, как показано в мобильном браузере Samsung.Почему это происходит?Как мне заставить мобильный браузер Samsung выглядеть как Firefox?

html, body { height: 100%; font-size: 14px;}

#banner
{
width: 100%;
height: 328px;
background: url(http://rawmoneycrew.com/2teso/img/banner_background.jpg) repeat center fixed; 
position: relative;
padding-top: 25px;
overflow: hidden;

}
.flex-container 
{
display: flex;
justify-content: center;
}
#menubutton
{
position: fixed;
top: 80px;
right: 20px;
background: url(http://rawmoneycrew.com/2teso/img/menubutton.jpg) no-repeat center ; 
height:68px;
width:68px;
display: block;
z-index: 2;
}
#menubutton:hover
{
position: fixed;
top: 80px;
right: 20px;
background: url(http://rawmoneycrew.com/2teso/img/menuup.jpg) no-repeat center ; 
height:68px;
width:68px;
display: block;
z-index: 2;
}
#biglogo
{
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 0.7s;
}
@keyframes example {
    0%   {margin-top: 200px;}
    100% {margin-top: 0px;}
}
#work
{
width: 100%;
height: 94px;
background-color: #3de1ff;
padding-top: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
#work a
{
margin-left: 10px;
color: white;
text-decoration: none;
}
#logoscrolls
{
width: 100%;
}
/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 0%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 1.0); /* Black w/opacity */
    overflow-y: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */

}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */

}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    z-index: 11;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}
#first
{
min-height: 527px;
background: url(http://rawmoneycrew.com/2teso/img/gbackgroundtest.jpg) no-repeat;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
font:25px/30px 'Nanum Gothic', sans-serif;
flex-direction: column;
position: relative;
z-index: 0;
}

#second
{
background-color: #ffffff;
width: 100%;
justify-content: center;
align-items: center;
display: flex;
}
#second2
{
background-color: #ffffff;
width: 100%;

}
.row {
width: 100vw;
box-sizing: border-box;
}
.fluid-container
{
background: red;
}
.remove-padding 
{
padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0
} 
.underline
{
text-decoration: underline;
}
#firstoverlay
{
position: absolute; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0; 
left: 0;
right: 0;
bottom: 0;
background-color: #3de1ff;
opacity: 0.5;
cursor: pointer; /* Add a pointer on hover */
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 3;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: bluefade;
animation-duration: 0.5s;
display: none;
animation-play-state: running;
animation-fill-mode: forwards;

}
#firstoverlayv2
{
position: absolute; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0; 
left: 0;
right: 0;
bottom: 0;
background-color: #3de1ff;
opacity: 0.5;
cursor: pointer; /* Add a pointer on hover */
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 3;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: bluefade;
animation-duration: 0.5s;
display: none;
animation-play-state: running;
animation-fill-mode: forwards;

}

@keyframes bluefade {
    0%   {opacity: 0;}
    100% {opacity: .5;}
}

#firstoverlay22
{
position: absolute; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0; 
left: 0;
right: 0;
bottom: 0;
background-color: #3de1ff;
opacity: 0.5;
cursor: pointer; /* Add a pointer on hover */
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 3;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: bluefade;
animation-duration: 0.5s;
display: none;
animation-play-state: running;
animation-fill-mode: forwards;
}
#firstoverlay2
{
position: absolute;
top: 0; 
left: 0;
right: 0;
bottom: 0;
z-index:3;
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: btw;
animation-duration: 0.5s;
animation-play-state: paused;
color: white;
}
#firstoverlay2v2
{
position: absolute;
top: 0; 
left: 0;
right: 0;
bottom: 0;
z-index:3;
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: btw;
animation-duration: 0.5s;
animation-play-state: paused;
color: white;
}
#firstoverlay2two
{
position: absolute;
top: 0; 
left: 0;
right: 0;
bottom: 0;
z-index:3;
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: btw;
animation-duration: 0.5s;
animation-play-state: paused;
color: white;
}
@keyframes btw {
    0%   {color: white;}
    100% {color: green;}
}

#line
{
width: 0px;
height: 0px;
margin-bottom: 0px;
border-bottom: 1px solid white;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: linegrow;
animation-duration: 0.2s;
display: none;
animation-play-state: running;
animation-fill-mode: forwards;
}

#line2
{
width: 0px;
height: 0px;
margin-bottom: 0px;
border-bottom: 1px solid white;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: linegrow;
animation-duration: 0.2s;
display: none;
animation-play-state: running;
animation-fill-mode: forwards;
}

@keyframes linegrow {
    0%   {width: 0px;}
    100% {width: 200px;height: 10px;
margin-bottom: 10px;}
}
#firstoverlay2:hover > #line
{
display: block;
}
#firstoverlay2v2:hover > #line2
{
display: block;
}
.spacebelow 
{
margin-bottom: 5px;
}
.wlink, .wlink:hover
{
color: white;
font-style: italic;
text-decoration: none;
}
body
{
-webkit-font-smoothing: antialiased; /* fixes anti-alias issue */
}
#listservice
{
list-style: none;
margin-top: 10%;
}
#listservice2
{
list-style: none;
width: 250px;
padding-top: 2%;
margin: 0 auto;
margin-top:20px;
}
#listservice li
{
margin-bottom: 10px
}
.listfix
{
margin-right: 5px;
}
#First2
{
height: 270px; 
width: 100%;
background: url(http://rawmoneycrew.com/2teso/img/gbackgroundtest.jpg) no-repeat;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
font:25px/30px 'Nanum Gothic', sans-serif;
flex-direction: column;
position: relative;
z-index: 0; 
}
#row2left, #row2right
{
min-height: 527px;
justify-content: center;
align-items: center;
display: flex;
position: relative;
z-index: 1;
}
#row2left
{
background-color: #ffffff;
}
#row2right
{
background-color: #dbdbdb;
}
#blueOverlay
{
opacity: 0;
background-color: #3de1ff;
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
#blueOverlay:hover
{
display: block;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 0.7s; /* Safari 4.0 - 8.0 */
animation-name: backgroundOv;
animation-duration: 0.7s;
animation-play-state: running;
animation-fill-mode: forwards;
}

@keyframes backgroundOv{
    0%   {opacity: 0;}
    100% {opacity: 0.5;}
}
#robot
{
height: 309px; 
width: 320px;
background-size:contain;
background-position:center;
position: absolute;
z-index: 3;
}

#robotsquare
{
width: 120px;
height: 100%;
background: url(http://rawmoneycrew.com/2teso/img/bluerobot.png) no-repeat center;
display: flex;
justify-content: center;
align-items: center;
float: left;
}
#row2right:hover #blueOverlay
{
display: block;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 0.7s; /* Safari 4.0 - 8.0 */
animation-name: backgroundOv;
animation-duration: 0.7s;
animation-play-state: running;
animation-fill-mode: forwards;
}
#row2right:hover #robotsquare
{
width: 120px;
height: 100%;
background: url(http://rawmoneycrew.com/2teso/img/redrobot.png) no-repeat center;
display: flex;
justify-content: center;
align-items: center;

float: left;
}
#webaudit
{

display: block;
clear: float;
max-width: 270px;
height: 100px;
float:left;
top:45%;
left: 35%;
position: absolute;
}
#bubble
{
float: left;
width: 60%;
display: inline-block;
}
#auditb
{
margin-left: 37px;
margin-top: 10px;
}
#ROItext
{
height: 240px;
background-color: #3b3f3f;
justify-content: center;
align-items: center;
display: flex;

}
#biggerROI
{
font:3.5em/1em 'Nanum Gothic', sans-serif;
color: white;
}
#smallerROI
{
font:2em/2em 'Nanum Gothic', sans-serif;
color: white;
}
#biggerROI2
{
font: 7vw/1vw 'Nanum Gothic', sans-serif;   
color: white;
}
#below_ROI
{
min-height: 800px;  
background: url(http://rawmoneycrew.com/2teso/img/bgfadedesignblue.jpg) no-repeat top center; 
}
.centersme
{
font: 10vw/1em 'Nanum Gothic', sans-serif;   
color: #000000; 
text-align: center;
margin-top: 10px;
}
.monthsbox
{
width: 242px;
height: 80px;
background: url(http://rawmoneycrew.com/2teso/img/monthbg.png) no-repeat;
margin:0 auto;
font: 2em/1em 'Nanum Gothic', sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.center-align-thingo
{
display: flex;
justify-content: center;
align-items: center;
padding: 5%;
margin-top: 30px;  
flex-direction: column;  
}
.listy
{
font: 1.4vw/2em 'Nanum Gothic', sans-serif; 
font-size: calc(14px + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
.texty
{
font:bold 1.2em/1em 'Nanum Gothic', sans-serif; 
width: 250px;
height: 50px;
margin-top:10px;
padding-top: 10px;
display: flex;
justify-content: left;
align-items: center;
padding-left: 10px;
}
.textfield
{
width: 250px;
height: 50px;
background: url(http://rawmoneycrew.com/2teso/img/formbg1.jpg) no-repeat; 
border: none;
color: #ffffff; 
padding-left: 21px;
font: 1.2em/1em 'Nanum Gothic', sans-serif;
margin-top:10px;
}
.textfieldB
{
margin-top:10px;
width: 250px;
height: 73px;
padding-left: 21px;
background: url(http://rawmoneycrew.com/2teso/img/formbgbig.jpg) no-repeat; 
border: none;
color: #ffffff; 
font: 1.2em/1em 'Nanum Gothic', sans-serif;
}
#submitB
{
width: 107px;
height: 80px;
background: url(http://rawmoneycrew.com/2teso/img/sendbutton.jpg) no-repeat; 
border: none;
margin-top:10px;
}
#formWrapper
{
width: 252px;
}
.colorMe
{
background: green;
}
#formtext
{
font-size: calc(14px + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
footer
{
margin-top: 20px;
background: url(http://rawmoneycrew.com/2teso/img/footer.jpg) repeat;
height: 296px;
width: 100%; 
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
footer a
{
    margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>New Hartford Digital Marketing</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <meta name="description" content="">
  <meta name="keywords" content="">
  
  <!-- START Google Analytics -->
  
  <!-- END Google Analytics -->  
  <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Muli%7CNanum+Gothic" rel="stylesheet">
</head>
<body>
<a href="javascript:void();" id="menubutton"  onclick="openNav()" ></a>

<section class="flex-container" id="banner">
<a href="#" id="biglogo"><img class="img-fluid" src="http://rawmoneycrew.com/2teso/img/logo.png" alt="Digital Marketing - 2Teso" height="282" width="282"></a>

<!-- The overlay -->
<div id="myNav" class="overlay">

  <!-- Button to close the overlay navigation -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

  <!-- Overlay content -->
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>

</div>
</section>
<section id="work">

<a href="#" id="spalogo"><img src="http://rawmoneycrew.com/2teso/img/spalogo.png" alt="Shangrila Massage Spa" height="72" width="116"></a>
<a href="#">View Our Work</a>

</section>


<div class="fluid-container d-none d-sm-block d-md-block d-lg-block d-xl-block">
<div class="row remove-padding">
<div id="first" class="col"  onmouseover="on();" onmouseout="off();" >
 
 
 <div id="firstoverlay" >
 </div>
 
 
 <div id="firstoverlay2" >
 <span  id="textfade" class="spacebelow">Your Business. Online.</span>
 <div id="line"></div>
 <a class="wlink" href="#">View Our Services</a>
 </div>
 
 
  

</div> <!-- First End-->


<div id="second" class="col">

<ul id="listservice">
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/seoicon.jpg" alt="seoicon">SEO</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/webdevicon.jpg" alt="web development" >Web Development</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/ppcicon.jpg" alt="ppc icon" >PPC</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/gdicon.jpg" alt="graphic design" >Graphic Design</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/movieicon.jpg" alt="video & cartoon" >Video & Cartoon</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/cwicon.jpg" alt="copy writing">Copy Writing</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/smicon.jpg" alt="social media">Social Media</li>
</ul>

</div> <!-- Second end -->


</div> <!-- row end -->
</div> <!-- fluid container end -->

<div id="First2" onmouseover="on();" onmouseout="off();" 
class="d-block d-sm-none d-md-none d-lg-none d-xl-none">

 <div id="firstoverlayv2" >
 </div>
 
 
  <div id="firstoverlay2v2" >
 <span  class="spacebelow">Your Business. Online.</span>
 <div id="line2"></div>
 <a class="wlink" href="#">View Our Services</a>
 </div>

</div> <!-- Second First END -->

 <!-- Mobile Second2 START -->
<div id="second2" class="d-block d-sm-none d-md-none d-lg-none d-xl-none" >

<ul id="listservice2">
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/seoicon.jpg" alt="seoicon">SEO</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/webdevicon.jpg" alt="web development" >Web Development</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/ppcicon.jpg" alt="ppc icon" >PPC</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/gdicon.jpg" alt="graphic design" >Graphic Design</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/movieicon.jpg" alt="video & cartoon" >Video & Cartoon</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/cwicon.jpg" alt="copy writing">Copy Writing</li>
<li><img class="listfix" src="http://rawmoneycrew.com/2teso/img/smicon.jpg" alt="social media">Social Media</li>
</ul>

</div> <!-- Mobile Second2 end -->

<!-- SECOND ROW BELOW "View Our Services" -->
<div class="container-fluid">
<div class="row">
<div id="row2left" class="col-sm-12 col-md-6"><img class="img-fluid" src="http://rawmoneycrew.com/2teso/img/googlekeywords.jpg" alt="Google Keywords" /></div>
<div id="row2right" class="col-sm-12 col-md-6">
   <div id="blueOverlay">
   </div>
   <div id="robot">
    <div id="robotsquare"></div>
    <div id="bubble">
    <img  src="http://rawmoneycrew.com/2teso/img/robotbubble.png" alt="bubble" />
    </div>
    <form id="webaudit">
    <input type="text" name="website" />
    <input type="image" src="http://rawmoneycrew.com/2teso/img/auditbutton.jpg"  id="auditb" alt="Submit" width="127" height="26">
    </form>
   </div>
</div>
</div>
</div>
<!-- SECOND ROW BELOW "View Our Services" -->


<div id="ROItext" >
<p id="biggerROI2" class=" ">Our Strategy = Positive ROI</p>
<!-- <p id="biggerROI" class="d-none d-sm-none d-md-block d-lg-block d-xl-block">Our Strategy = Positive ROI</p>
<p id="smallerROI" class="d-block d-sm-block d-md-none d-lg-none d-xl-none">Our Strategy = Positive ROI</p> -->
</div>

<!-- Our Strategy = Positive ROI Area Below-->

<div class="container-fluid" id="below_ROI">

   <h2 class="centersme">SEO Time Line</h2>

   <div class="monthsbox ">Month 1</div>


   <div class="row">
   	  <!--SIDE L M1 -->
   	  <div class="col-md-6 col-lg-6 center-align-thingo">
   	 	<img src="http://rawmoneycrew.com/2teso/img/seoimac.png" class="img-fluid" alt="computer" />
   	  </div>
   	  <!--END SIDE L M1 -->
   	  <!--  SIDE R M1 -->
   	  <div class="col-md-6 col-lg-6 center-align-thingo">
   	 	<ul class="listy">
   	 		<li>In-depth site analysis</li>
   	 		<li>Competition analysis</li>
   	 		<li>Keyword research</li>
   	 		<li>On-page optimization: add meta titles, description, image alt tags, website reponsiveness, UX, etc.</li>
   	 		<li>Set up webmaster tools & submit the website & sitemap</li>
   	 		<li>Website speed analysis</li>
   	 		<li>Review social media accounts and connect with the website</li>
   	 		<li>Initial traffic & ranking report</li>
   	 	</ul>
   	 	<!--END SIDE R M1-->
   	  </div>
   	</div>


   <div class="monthsbox ">Month 2</div>

   <div class="row">
   	 <!-- SIDE L M2 -->
   	  <div class="col-md-6 col-lg-6 center-align-thingo">
   	 	<ul class="listy">
   	 		
   	 		<li>Inbound link analysis</li>
   	 		<li>Submission to national & local directories</li>
   	 		<li>Review online reviews</li>
   	 		<li>Prepare link building plan</li>
   	 		<li>Review indexing report & sitmap submission</li>
   	 		<li>Analyse Google Analytics report</li>
   	 		<li>Monthly progress report</li>

   	 	</ul>
   	 </div>
   	 	<!--END SIDE L M2 -->
   	  <!-- SIDE R M2 -->
   	  <div class="col-md-6 col-lg-6 center-align-thingo">
   	 	<img src="http://rawmoneycrew.com/2teso/img/chart2.png" class="img-fluid" alt="chart2" />
   	  </div>
   	  <!--  END SIDE R M2 -->
   	  </div>
    <div class="monthsbox ">Month 3</div>

      <div class="row">
   	  <!-- SIDE L M3-->
   	  <div class="col-md-6 col-lg-6 center-align-thingo">
   	 	<img src="http://rawmoneycrew.com/2teso/img/chart3.png" class="img-fluid" alt="chart3" />
   	  </div>
   	  <!--END SIDE L M3 -->
   	  <!-- SIDE R M3-->
   	  <div class="col-md-6 col-lg-6 center-align-thingo">
   	 	<ul class="listy">
   	 		<li>Review search engine crawling & indexing report</li>
   	 		<li>Verification of the sitemap</li>
   	 		<li>Link analysis & building</li>
   	 		<li>Social media review</li>
   	 		<li>Optimize any new website content</li>
   	 		<li>Monthly reporting</li>
   	 	</ul>
   	 	<!--END SIDE M3-->
   	  </div>
   	</div>

   	  <div class="monthsbox ">N<sup>th</sup>  Month</div>
   	  <div class="col-lg-12 center-align-thingo">
   	 	<ul class="listy">
   	 		<li>SEO consultation as needed</li>
   	 		<li>Ongoing review of crawling errors</li>
   	 		<li>SEO optimize new content</li>
   	 		<li>Link Building</li>
   	 	</ul>
   	 	<!--END SIDE M3-->
   	  </div>

<div class="row">
<div class="col-md-5 center-align-thingo ">

	<div id="formWrapper">
	<div class="texty">Interested?</div>
	<form method="post" action="#">
	<input type="text" class="textfield" id="name" name="fname" placeholder="Name">
	<input type="text" class="textfield" id="email" name="email" placeholder="E-Mail">
	<input type="text" class="textfieldB" id="message" name="message" placeholder="Message">
	<input type="submit" class="" id="submitB" name="submit" value="" />
    </form>
    </div>
</div>
<div class="col-md-7 center-align-thingo">
	<p id="formtext">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.” 
    </p>
</div>
</div>

</div>

<footer>
	<a href="#"><img src="http://rawmoneycrew.com/2teso/img/twitter.jpg" class="img-fluid" alt="twitter"/></a>
	<a href="#"><img src="http://rawmoneycrew.com/2teso/img/facebook.jpg" class="img-fluid" alt="facebook"/></a>
</footer>


<script>
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

function on() {
    document.getElementById("firstoverlay").style.display = "block";
    document.getElementById("firstoverlayv2").style.display = "block";
    
}

function off() {
    document.getElementById("firstoverlay").style.display = "none";
    document.getElementById("firstoverlayv2").style.display = "none";
}



</script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

</body>
</html> 

Вот ссылка: Ссылка на страницу

Отлично смотрится на мобильных Firefox и настольных интернет-браузерах.

Мобильный Интернет Samsung 5.2.20-24: Это выглядит так -

enter image description here

Почему?Как это исправить?

Он должен вести себя как Firefox:

enter image description here

...