1
I am Newbie and would like a help with a problem I am facing on my mobile site. I am using bootstrap.
That is the result:
The text Squish Monsters is pasting on the navbar, the correct result should be:
Note:The first is in a G4+ and the second in a Samsung S8+.
HTML
<body>
<!-- NAVBAR -->
<!-- Toggle button for smartphones -->
<nav class="navbar navbar-fixed-top">
<button class="navbar-toggler hidden-sm-up " type="button" data-toggle="collapse" data-target="#navigation">
☰
</button>
<!-- GVExperience logo -->
<a class="navbar-left float-xs-right float-sm-left" href="#"><img src="squishmonsters/img/logo-small2.png" class="imagem img-fluid" alt="gvexperience logo"/></a>
<!-- Header menu -->
<div class="collapse navbar-toggleable-xs" id="navigation">
<ul class="nav navbar-nav float-sm-right">
<li class="nav-item">
<a class="nav-link" href="#who">Key Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Screenshots</a>
</li>
</ul>
</div>
</nav>
<!-- END NAVBAR -->
<!-- LANDING PAGE -->
<section id="header">
<div class="container">
<div class="row">
<div class="col-md-6 wow fadeIn">
<h1>Squish Monsters</h1>
<p class="subtitle">A game from GVExperinece Company.</p></br>
<p class="lead">The monsters are calling! Join us in this journey to save the world.</p>
<div class="paragraph">
<p class="hidden-sm-down">Designed to be simple and intuitive, just press play and GAME ON!</br>
Choose between Arcade mode or Staged mode and enjoy 40 different stages to play.</br>
3 Different maps and 7 differents monsters ready to provide unique and funny moments to you and your friends.</br>
Power ups that will blow everything up. <i>LITERALLY.</i></p>
</div>
<br>
<br>
<a href="https://play.google.com/store/apps/details?id=com.gvexperience.squishmonsters&hl=en"> <img src="squishmonsters/img/GooglePlay800.png" class="img-fluid" alt="google play download button"/></a>
</div>
<div class="col-md-6 header-right hidden-sm-down wow fadeIn">
<span><img src="squishmonsters/img/bluemonster.png" class="img-fluid" alt="blue monster"/></a></span>
</div>
</div>
</div>
</section>
<!-- END LANDING PAGE -->
<!-- KEY FEATURES -->
<section id="who">
<div class="container">
<div class="row">
<div class="col-md-6 wow">
<h2>Key Features</h2>
<hr align="left" width="50%">
<p class="lead">Smash cute monsters in a beautiful world</p>
<ul>
<li>Smash cute monsters in a beautiful world.</li>
<li>Invite your friends from facebook and check who will have the best score!</li>
<li>Play anywhere, anytime, you don't require wifi connection to play!</li>
<li>7 different monsters with unique abilities</li>
<li>Different Power ups to make the game more enjoyable</li>
</ul>
</div>
<div class="col-md-6 wow fadeInRight" data-wow-delay="0.5s" data-wow-duration="1s">
<img class="img-fluid" src="squishmonsters/img/cellphone.png" alt="smartphone with squish monsters"/>
</div>
</div>
</div>
</section>
<!-- END KEY FEATURES-->
<!-- SCREENSHOTS -->
<section id="work">
<div class="container">
<!-- Title of section -->
<div class="row">
<div class="col-md-12 wow fadeInUp">
<h2>Screenshots</h2>
<hr align="left" width="30%">
<p class="subtitle">Screenshots taken from real gameplay!</p>
</div>
</div>
<!-- CARD 1 -->
<div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.3s">
<div class="card">
<div class="work-img">
<img class="card-img-top img-fluid" src="squishmonsters/img/jungle.png" alt="jungle map">
</div>
<div class="card-block">
<p class="card-text">Smash as many monsters as you can and improve your score!</p>
</div>
</div>
</div>
<!-- END CARD 1 -->
<!-- CARD 2 -->
<div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.5s">
<div class="card">
<div class="work-img">
<img class="card-img-top img-fluid" src="squishmonsters/img/frozen.png" alt="frozen map">
</div>
<div class="card-block">Get bonuses balls to improve your score!</div>
</div>
</div>
<!-- END CARD 2 -->
<!-- CARD 3 -->
<div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.7s">
<div class="card">
<div class="work-img">
<img class="card-img-top img-fluid" src="squishmonsters/img/texas.png" alt="texas map">
</div>
<div class="card-block">
<p class="card-text">Play in different maps with 7 different cute monsters.</p>
</div>
</div>
</div>
<!-- END CARD 3 -->
<!-- CARD 4 -->
<div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.9s">
<div class="card">
<div class="work-img">
<img class="card-img-top img-fluid" src="squishmonsters/img/explo.png" alt="special effects">
</div>
<div class="card-block">
<p class="card-text">Special powers make everything happen.</p>
</div>
</div>
</div>
<!-- END CARD 4 -->
</div>
</section>
<!-- END SCREENSHOTS -->
<!-- DOWNLOAD -->
<section id="download">
<div class="container wow">
<div class="row">
<div class="col-md-8 col-sm-6">
<h1>Download and play for <b>free</b> now!</h1>
<hr align="left" width="85%">
<br>
<a href="https://play.google.com/store/apps/details?id=com.gvexperience.squishmonsters&hl=en"> <img src="squishmonsters/img/GooglePlay600.png" class="img-fluid" alt="google play download button"/></a>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</section>
<!-- END DOWNLOAD -->
<!-- FOOTER -->
<section id="footer">
<div class="container wow">
<div class="row">
<div class="col-md-8 col-sm-6">
<p><b>About GVexperience</b></p>
<p>Founded in 2017 with the mission of create simple and funny games.</p>
<p>Our biggest objective is to bring tons of smiles to the world :)!</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="https://www.facebook.com/squishmonsters/" target="_blank">Like us: <i class="fa fa-facebook"></i></a></li>
</ul>
</div>
<div class="col-md-4 col-sm-6">
<p><b>Say hello:</p></b>
<ul class="list-unstyled">
<li><p><strong><i class="fa fa-envelope"></i> Email: </strong>[email protected]</p></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>© 2018 Designed by GVexperience</p>
</div>
</div>
</div>
</section>
<!-- END FOOTER -->
</body>
</html>
CSS
html,
body {
height:100%;
font-family: 'Exo', sans-serif;
vertical-align: middle;
position: relative;
}
/* For small devices configuration */
@media(max-width:768px)
{
#header {
text-align:center;
}
#header img {
margin:20% auto 0;
}
#who {
text-align:center;
}
#who img {
margin-top:15%;
}
#footer {
text-align:center;
}
}
/* NAVBAR configuration */
.navbar {
background-color:black !important;
border-bottom: 1px solid #dedede;
font-family: 'Exo', sans-serif;
}
.navbar .nav .nav-item .nav-link {
color: #d1d1d1;
font-size:22px;
}
.navbar .nav .nav-item .nav-link:hover {
color: #fff;
font-size:23px;
}
.navbar-toggler {
color: white;
}
/*HEADER*/
#header {
background-size:cover;
height:100%;
display:flex;
align-items:center;
}
#header img {
padding:0 0 20px;
width:80%;
}
#header span{
margin-left:60px;
}
#header .paragraph{
line-height:2;
}
/*WHO*/
#who {
padding:5rem 0;
background-color:#F5F5F5;
}
#who li{
line-height:3;
font-size: medium;
}
/*WORK*/
#work {
padding:5rem 0;
}
#work .work-img{
position:relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#work .card-block{
font-size: small;
}
/*END WORK*/
/*Download*/
#download{
padding:5rem 0;
}
#download img{
position:relative;
}
/*FOOTER*/
#footer {
padding:2rem 0;
background-color:#484848;
color:white;
font-size: small;
}
#footer a {
color:white;
}
#footer .fa {
padding:0 5px;
}
Thank you for your attention
The cause of this problem is related to Media Query
@mediain his CSS and the difference in resolution of the devices used in the test. However, the CSS posted does not match the excerpt from HTML in your question. Please provide the correct code so that we can help you.– user98628
I added all the css snippets corresponding to navbar and header.
– Glauco Vasconcellos
But the problem may be what comes after the Nav, since the problem is not the Nav, but the text that comes in the later div.
– Sam
Sorry, I thought it would be polluted if I copied the entire css. I edited adding my full css file.
– Glauco Vasconcellos
Glauco if my reply helped you in any way consider marking as Solved using the ✓ next to the left arrows
– hugocsl