Responsive content with side remaining

Asked

Viewed 1,112 times

-3

Guys, I’m trying to pass content to responsive, but I’m having difficulties, I followed some articles on the internet, and I got this result

However I’m not able to make the content stay 100% is always a space left on the right side whatever size I put on the screen.

I’ve tried everything and I can’t see where I’m going wrong.

I ask for help from friends for an analysis of my possible mistakes.

css css3

  • There’s no step-by-step to be responsible, it depends on site-to-site, so looking at just one article, it’s going to be hard for you to get if you don’t have experience. I recommend leaving your fluid layout first, working with percentages, etc... And using media queries and Flexbox.

  • Questions that contain only external link can be considered of low quality, and the external link can be inactive at any time. Leave the source code in the question so that in the future, when someone has the same problem can see the problem and know how to solve.

1 answer

2


The problem is not the "space left on the right side", and yes because the content is aligned to the left.

Center the elements in #wrapper with text-align: center; that will solve the problem:

#wrapper{
    padding-top: 20px;
    text-align: center;
}

EDIT

Besides being important to centralize (as described above), it is to use the function calc CSS to split the elements on the screen. I also took the liberty of tweaking some styles that seemed to be applied wrong, such as the margin and padding in the images and <li>. See it working with the fixes at this link.

*{
	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>Batman vs Supe...</span>
		</li>
		<li class="hm">
			<img class="icon" src="http://br.web.img3.acsta.net/r_1280_720/pictures/17/03/14/20/37/126690.jpg">
			<span>Meu Malvado...</span>
		</li>
		<li class="hm">
			<img class="icon" src="http://br.web.img3.acsta.net/r_1920_1080/pictures/17/04/11/14/14/492957.jpg">
			<span>A Cidade Perdida</span>
		</li>
		<li class="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>Os Vingadores</span>
		</li>
		<li class="hm">
			<img class="icon" src="http://moviesmedia.ign.com/movies/image/object/142/14285520/iron_man3-downey-multipleironmen-poster-610x876.jpg">
			<span>Homem de Ferro 3</span>
		</li>
		<li class="hm">
			<img class="icon" src="https://upload.wikimedia.org/wikipedia/pt/archive/a/ab/20171013162740%21Poster_do_filme_HP7-8.jpg">
			<span>Harry Potter 3</span>
		</li>
		<li class="hm">
			<img class="icon" src="https://danmoviesnstuff.files.wordpress.com/2013/01/o-homem-de-ac3a7o-poster-teaser-2.jpg">
			<span>O Homem de Aço</span>
		</li>
		<li class="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>
		<li class="hm">
			<img class="icon" src="https://loftcinema.org/files/2017/10/dcb432858d20800950b69ca8995eaf07.jpg">
			<span>Mulher Maravilha</span>
		</li>
		<li class="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>
		<li class="hm">
			<img class="icon" src="https://im.ziffdavisinternational.com/ign_br/screenshot/default/angrybirds-onlineposter-brazil_8sqr.jpg">
			<span>Angry Birds</span>
		</li>
		<li class="hm">
			<img class="icon" src="http://cinema10.com.br/upload/filmes/filmes_2472_poste3ligadajustica.jpg">
			<span>Liga da Justiça</span>
		</li>
	</ul>
</div>

  • so, in parts does not solve, I came to try earlier this way, but it is screwed the layout, I am thinking and a form that adapts 100% in the layout and does not have left side nor the right side, my problem is there, thanks for the help.

  • @Patriquealves Okay, I’ll see here...

  • @Patriquealves I edited the question. Have a look at this link http:/dvdteste.hospedagemdesites.ws/patrique.php

  • chic bro, just a doubt, the use of bootstrap is really necessary? like the code, I’ll be studying, thanks for the help!

  • @Patriquealves Necessary is not no, but offers many good tools. I particularly do not like. I make responsive websites using jQuery. Abs!

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.