I'm trying to pass content to responsive, but I'm having trouble, I've followed some articles on the internet about, and I've come to this result.
But I'm not able to make the content stay 100%, always keep a space on the right side, whatever size I put on the screen.
I've tried everything and I can not see where I'm going wrong.
I ask friends for an analysis of my possible mistakes.
The problem is not the " space left over from the right side", but rather because the content is left-aligned.
Centralize elements in #wrapper with text-align: center; that will solve the problem:
#wrapper{
padding-top: 20px;
text-align: center;
}
In addition to being important to center (as described above), is to use the calc function of CSS to split the elements on the screen. I also took the liberty of adjusting some styles that seemed to me wrong, such as margin and padding in images and <li> . See working with the fixes fixes.
*{
margin:0;
padding:0;
box-sizing: 0;
}
body{
font-family: 'Source Sans Pro', sans-serif;
background: -moz-radial-gradient(center, ellipse cover, rgba(134,128,255,1) 0%, rgba(0,0,0,1) 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(134,128,255,1)), color-stop(100%, rgba(0,0,0,1))); /* safari4+,chrome */
background:-webkit-radial-gradient(center, ellipse cover, rgba(134,128,255,1) 0%, rgba(0,0,0,1) 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, rgba(134,128,255,1) 0%, rgba(0,0,0,1) 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(134,128,255,1) 0%, rgba(0,0,0,1) 100%); /* ie10+ */
background:radial-gradient(ellipse at center, rgba(134,128,255,1) 0%, rgba(0,0,0,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8680FF', endColorstr='#000000',GradientType=1 ); /* ie6-9 */
}
#wrapper{
padding-top: 20px;
text-align: center;
}
.nav{
}
.nav li{
background:rgba(0, 0, 0, 0.7);
display:inline-block;
border:0;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
margin: 0px 4px;
margin-bottom: 10px;
padding-bottom: 10px;
}
.nav li:hover{
opacity:1;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.1);
transition: all 200ms ease-in;
transform: scale(1.1);
background:rgba(11, 132, 138, 0.6);
}
img.icon{
display:block;
margin-bottom: 6px;
width:100%;
}
.nav li:hover img.icon{
}
.nav li span{
text-align:center;
display:block;
color:rgba(255, 255, 255, 1);
font-size:0.9em;
transition:padding-top 0.4s;
-webkit-transition:padding-top 0.4s;
}
.nav li:hover span{
}
.hm{
background:rgba(0, 0, 0, 0.7);
position: relative;
width: calc( (100% - -86px) / 8 );
padding: 6px 6px 10% 6px;
xpadding-right: 6px;
}
@media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.hm {
width: calc(100% - 8px);
padding-bottom: 100%;
}
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.hm {
width: calc( (100% - 20px) / 2 );
padding-bottom: 50%;
}
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.hm {
width: calc( (100% - 64px) / 6 );
padding-bottom: 33.3%;
}
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.hm {
width: calc( (100% - -64px) / 8 );
padding-bottom: 25%;
}
}<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>
<div id="wrapper">
<ul class="nav">
<li class="hm">
<img class="icon" src="https://i.pinimg.com/736x/61/1c/60/611c608f777a4891cada23ef36572b6b--batman-vs-superman--batman-vs-superman-trailer.jpg"><span>BatmanvsSupe...</span></li><liclass="hm">
<img class="icon" src="http://br.web.img3.acsta.net/r_1280_720/pictures/17/03/14/20/37/126690.jpg"><span>MeuMalvado...</span></li><liclass="hm">
<img class="icon" src="http://br.web.img3.acsta.net/r_1920_1080/pictures/17/04/11/14/14/492957.jpg"><span>ACidadePerdida</span></li><liclass="hm">
<img class="icon" src="http://i0.wp.com/pipocamoderna.com.br/wp-content/uploads/2016/03/os-vingadores-novo-poster-brasil-630x933.jpg"><span>OsVingadores</span></li><liclass="hm">
<img class="icon" src="http://moviesmedia.ign.com/movies/image/object/142/14285520/iron_man3-downey-multipleironmen-poster-610x876.jpg"><span>HomemdeFerro3</span></li><liclass="hm">
<img class="icon" src="https://upload.wikimedia.org/wikipedia/pt/archive/a/ab/20171013162740%21Poster_do_filme_HP7-8.jpg"><span>HarryPotter3</span></li><liclass="hm">
<img class="icon" src="https://danmoviesnstuff.files.wordpress.com/2013/01/o-homem-de-ac3a7o-poster-teaser-2.jpg"><span>OHomemdeAço</span></li><liclass="hm">
<img class="icon" src="http://cinedestak.com/wp-content/uploads/2014/03/X-Men-DFP-poster-nacional-1.jpg"><span>X-Men</span></li><liclass="hm">
<img class="icon" src="https://loftcinema.org/files/2017/10/dcb432858d20800950b69ca8995eaf07.jpg"><span>MulherMaravilha</span></li><liclass="hm">
<img class="icon" src="https://im.ziffdavisinternational.com/ign_br/screenshot/default/warcraft-online-1-sht-colouredsky-brazil-0_m571.jpg"><span>WarCraft</span></li><liclass="hm">
<img class="icon" src="https://im.ziffdavisinternational.com/ign_br/screenshot/default/angrybirds-onlineposter-brazil_8sqr.jpg"><span>AngryBirds</span></li><liclass="hm">
<img class="icon" src="http://cinema10.com.br/upload/filmes/filmes_2472_poste3ligadajustica.jpg">
<span>Liga da Justiça</span>
</li>
</ul>
</div>