I have a problem that is very basic at first, but I have tried everything that is not working.
The problem only occurs when opening the site on the smartphone .. if I simulate the resolution in the PC browser it works normal ..
See the image below:
Noticethatthereisasidemarginontheright..Ineedtheimageandthelogotobe100%ofthescreen..thisproblemonlyoccursonthesmartphoneI'musingwindowsphone10EDGE.
I'musingbootstrap3andIalreadyusethefollowingmetatags:
<metaname="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
In html the code looks like this:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<h1 class="logo"><img class="img-responsive" src="logo.png" alt="logo"></h1>
</div>
<div class="col-xs-12 no-gutter">
<img src="maroon5.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
My css looks like this:
.no-gutter { padding: 0;}
I have tried to put width: 100%, padding: 0! important .. and other things .. but nothing takes that side margin ..
Does anyone have any ideas?