Responsive layout in an image

Question

Responsive layout in an image

Asked 6 years, 1 month ago

Viewed 42 times

0

Good morning dear programmers, today I disturb you again with my questions of beginners. I wonder why I can not make this responsive image with reduced size(In case I put 80%), when I do this is left this space, and 100% is normal.

@charset "UTF-8";
@font-face {
    font-family: Agency FB;
    src: url(../_fontes/agencyfb.ttf);
}
html {
  overflow-y: scroll;
}
/*Corpo do site*/
.postagem {
	background-color: rgba(255,140,40,.0px;);
	margin: 0px;
	font-family: arial;	
	font-size: 1.2vw;
}
/*Divisão de conteudo do meu site*/
#interface {
	width: 85%;
	background-color: white;
	margin: 110px auto 10px auto;
	box-shadow: 0px 4px 6px 3px rgba(0,0,0,.1);
	}
#interface2 {
	width: 85%;
	margin: 110px auto 10px auto;
	}
/*Cabeçalho do meu site*/
.cabecalho {
	position: fixed;
	top: 0px;
	width: 100%;
	background-color: rgba(255,140,40,1);
	transition: 4s;
	margin: 0px;
	padding: 0px;
}	
.logo {
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	position: relative;
	float: right;
	padding: 0px;
	margin: 25px 38% 0px 0px;
	color: rgba(255,255,255,1);
	font-family: 'Agency FB';
	font-size: 1.8vw;
}
#fcor {
	color: rgba(255,220,180,1);
}
/*Menu*/
.menu {
	float: left;
}
.mn {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-transform: uppercase;
}
.icon{
	-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.2));
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,.2));
}
.mn a {
	text-decoration: none;
	color: white;
}
.im {
	text-shadow: 1px 1px 1px rgba(0,0,0,.2);
	font-weight: 600;
	text-align: center;
	color: white;
	font-size: 0.8vw;
	transition: 0s;
	font-family: 'Agency FB';
	padding: 10px 10px 22px 10px;
	margin: 0px;
	display: inline-block;
}
.efc {
}
.im:hover {
	transition: 0.2s;
	background-color: rgba(244,116,0,1);
}
/*Postagens*/
.artigo {
	padding: 15px 25px 15px 25px;
}

.titulo {
	font-family: arial;
	font-size: 12pt;
	color: rgba(0,0,0,.8);
	margin: 0px 0px 5px 0px; 
	padding: 0px;
}

.paragrafo {
	margin: 0px;
	padding: 0px;
	color: rgba(0,0,0,.6);
	font-family: arial;
	text-align: justify;
}
.li {
	font-size: 20pt;
	font-weight: 900;
}
.link {
	color: black;
	text-decoration: none;
}
.link:hover {
	font-style: none;
	text-decoration: underline;
}
.icone {
	transition: 2s;
	border: solid white 6px;
	box-shadow: 4px 4px 6px 2px rgba(0,0,0,0.1);
	height: 400px;
	width: 600px;
}
/*Folhas de estilo de tabela*/
.tabela {
	border-collapse: collapse;
}
.tdn {
	border: solid black 2px;
	padding: 2px;
}
.vazio {
	border: solid black 2px;
	padding: 12px;
}
.vazio#vm {
	padding: 36px;
}
.tabt {
	background-color: white: ;
	padding: 2px;
	border: solid black 2px;
}
.subt {
	background-color: lightgray;
	padding: 2px;
	border: solid black 2px;
}
.ft {
	border: solid black 2px;
}
.asst {
	padding: 12px;
	font-weight: 900;
	text-align: center;
}
@charset "UTF-8";
.galeria {
  display: flex;
  justify-content: center;
  padding: 5px
}
.galeria a {
  margin: 10px 10px 10px 10px;
  padding: 0px;
}
.post {
  position: relative;
  margin: 0px;
  padding: 0px;
  background-color: black;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
  width: 80%;
  height: 80%
}
.imgp {
  width: 100%;
  height: 100%
  }

.legenda {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  color: white;
  padding: 10px;
  background-color: rgba(0,0,0,.7);
  font-size: 1vw;
  
}
.post:hover .legenda {
  transition: 0.2s;
  background-color: rgba(244,116,0,1);
}

	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
		<meta charset="UTF-8">
		<link rel="icon" href="_imagens/icon.png" type="image/x-icon" />
		<link rel="shortcut icon" href="_imagens/icon.png" type="image/x-icon" />
		<title>Processos e Manuais de Instruções</title>
		<link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
		<link rel="stylesheet" type="text/css" href="_css/fotos.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	$(document).scroll(function() {
	var y = $(this).scrollTop();
	if (y < 25) {
		$('.logo').css({'margin': '25px 38% 0px 0px'});
		$('.im').css({'padding': '10px 10px 22px 10px'});
		$('.icon').css({'display': 'inline-block'});
		$('.efc').css({'display': 'initial'});
		$('.cabecalho').css({'transition': '4s'});
	} else {
		$('.logo').css({'margin': '3px 38% 0px 0px'});
		$('.im').css({'padding': '10px 10px 10px 10px'});
		$('.icon').css({'display': 'none'});
		$('.efc').css({'display': 'none'});
		$('.cabecalho').css({'transition': '4s'});
	}
	});
	</script>
	</head>
	<body class="postagem">
			<header class="cabecalho">
				<nav class="menu">
					<h1 hidden="true">Menu Principal</h1>
					<ul class="mn"> 
					       <a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/hEiU5f/icasa.png"><br class="efc">Home</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/f46hQf/ilivro.png"><br class="efc">Manuais e Processos</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/it5bkf/iferramentas.png"><br class="efc">Equipamentos</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/irX0BL/ietiqueta.png"><br class="efc">Inventário</li></a>
					</ul>
				</nav>
				<h1 class="logo">MANUAIS E PROCESSOS<span id="fcor"> INFORMÁTICA</span></h1>	
			</header>
		<div id="interface">
			<section class="galeria">
				<a href="_postagem/1009182.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/kORwJ0/check.jpg">
						<figcaption class="legenda">Checklist de manutenção de computador</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009181.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/gbsE5f/win10.jpg">
						<figcaption class="legenda">Instalar sistema operacional (Windows 10)</figcaption>
						</figure>
				</a>
				<a href="_postagem/1009185.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/iD2srL/oracle.png">
						<figcaption class="legenda">Instalar o software Oracle</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009186.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/iniAd0/office.png">
						<figcaption class="legenda">Instalar o pacote office</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009187.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/dMaZ5f/vnc.png">
						<figcaption class="legenda">Instalar UltraVNC Viewer</figcaption>
					</figure>
				</a>
				
			</section>
		</div>
	</body>
	</html>

So, this is the problem, I can decrease the size of the image and caption, but it keeps overwriting this space that is the link, I wanted to decrease too but I can’t. And also another question about responsive layout is in the menu icons, I can’t put

img { 
max-width: 100%
height: auto;
}

to adjust the page...

Dude I didn’t quite understand your problem, where is left space? Which image are you talking about soon? If possible put a print there of your problem

– hugocsl

2018/10/18 at 12:31
When placing image with 80%, it and the caption decreased as you can see on the page, but the link has a defined size that I can’t change

– Marcos Aurélio

2018/10/18 at 14:15

1 answer

Browser other questions tagged html css responsive-layout

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

by hugocsl • **65,517** points · Answer 1 · 2018-10-18T14:51:58+00:00

Dude your problem is that you are using the property in the wrong places. For example you are using padding on the link when you should actually use margin in class .post

Another thing, if you want it to be 100% wide you cannot set to 80%. try increasing the margin to "decrease" the .post, because one will push the other side and they will be "shrunk".

Follow the code with the fix to look like the image above, I left the comments in the CSS where I moved, it was little thing until ;)

    @charset "UTF-8";
@font-face {
    font-family: Agency FB;
    src: url(../_fontes/agencyfb.ttf);
}
html {
  overflow-y: scroll;
}
/*Corpo do site*/
.postagem {
	background-color: rgba(255,140,40,.0px;);
	margin: 0px;
	font-family: arial;	
	font-size: 1.2vw;
}
/*Divisão de conteudo do meu site*/
#interface {
	width: 85%;
	background-color: white;
	margin: 110px auto 10px auto;
	box-shadow: 0px 4px 6px 3px rgba(0,0,0,.1);
	}
#interface2 {
	width: 85%;
	margin: 110px auto 10px auto;
	}
/*Cabeçalho do meu site*/
.cabecalho {
	position: fixed;
	top: 0px;
	width: 100%;
	background-color: rgba(255,140,40,1);
	transition: 4s;
	margin: 0px;
	padding: 0px;
}	
.logo {
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	position: relative;
	float: right;
	padding: 0px;
	margin: 25px 38% 0px 0px;
	color: rgba(255,255,255,1);
	font-family: 'Agency FB';
	font-size: 1.8vw;
}
#fcor {
	color: rgba(255,220,180,1);
}
/*Menu*/
.menu {
	float: left;
}
.mn {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-transform: uppercase;
}
.icon{
	-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.2));
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,.2));
}
.mn a {
	text-decoration: none;
	color: white;
}
.im {
	text-shadow: 1px 1px 1px rgba(0,0,0,.2);
	font-weight: 600;
	text-align: center;
	color: white;
	font-size: 0.8vw;
	transition: 0s;
	font-family: 'Agency FB';
	padding: 10px 10px 22px 10px;
	margin: 0px;
	display: inline-block;
}
.efc {
}
.im:hover {
	transition: 0.2s;
	background-color: rgba(244,116,0,1);
}
/*Postagens*/
.artigo {
	padding: 15px 25px 15px 25px;
}

.titulo {
	font-family: arial;
	font-size: 12pt;
	color: rgba(0,0,0,.8);
	margin: 0px 0px 5px 0px; 
	padding: 0px;
}

.paragrafo {
	margin: 0px;
	padding: 0px;
	color: rgba(0,0,0,.6);
	font-family: arial;
	text-align: justify;
}
.li {
	font-size: 20pt;
	font-weight: 900;
}
.link {
	color: black;
	text-decoration: none;
}
.link:hover {
	font-style: none;
	text-decoration: underline;
}
.icone {
	transition: 2s;
	border: solid white 6px;
	box-shadow: 4px 4px 6px 2px rgba(0,0,0,0.1);
	height: 400px;
	width: 600px;
}
/*Folhas de estilo de tabela*/
.tabela {
	border-collapse: collapse;
}
.tdn {
	border: solid black 2px;
	padding: 2px;
}
.vazio {
	border: solid black 2px;
	padding: 12px;
}
.vazio#vm {
	padding: 36px;
}
.tabt {
	background-color: white: ;
	padding: 2px;
	border: solid black 2px;
}
.subt {
	background-color: lightgray;
	padding: 2px;
	border: solid black 2px;
}
.ft {
	border: solid black 2px;
}
.asst {
	padding: 12px;
	font-weight: 900;
	text-align: center;
}
@charset "UTF-8";
.galeria {
  display: flex;
  justify-content: center;
  padding: 5px
}
.galeria a {
	/* não usar esse padding */
  /* margin: 10px 10px 10px 10px; */
  padding: 0px;
}
.post {
  position: relative;
  /* coloque margem e não o padding  */
  margin: 10px;
  padding: 0px;
  background-color: black;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
  /* se vc quer que fique 100% tem que remover esses 80% */
  /* width: 80%; */
  /* height: 80% */
}
.imgp {
  width: 100%;
  height: 100%
  }

.legenda {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  color: white;
  padding: 10px;
  background-color: rgba(0,0,0,.7);
  font-size: 1vw;
  
}
.post:hover .legenda {
  transition: 0.2s;
  background-color: rgba(244,116,0,1);
}

			<header class="cabecalho">
				<nav class="menu">
					<h1 hidden="true">Menu Principal</h1>
					<ul class="mn"> 
					       <a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/hEiU5f/icasa.png"><br class="efc">Home</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/f46hQf/ilivro.png"><br class="efc">Manuais e Processos</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/it5bkf/iferramentas.png"><br class="efc">Equipamentos</li></a><!--  
					    --><a href="index.html"><li class="im"><img class="icon" src="https://image.ibb.co/irX0BL/ietiqueta.png"><br class="efc">Inventário</li></a>
					</ul>
				</nav>
				<h1 class="logo">MANUAIS E PROCESSOS<span id="fcor"> INFORMÁTICA</span></h1>	
			</header>
		<div id="interface">
			<section class="galeria">
				<a href="_postagem/1009182.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/kORwJ0/check.jpg">
						<figcaption class="legenda">Checklist de manutenção de computador</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009181.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/gbsE5f/win10.jpg">
						<figcaption class="legenda">Instalar sistema operacional (Windows 10)</figcaption>
						</figure>
				</a>
				<a href="_postagem/1009185.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/iD2srL/oracle.png">
						<figcaption class="legenda">Instalar o software Oracle</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009186.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/iniAd0/office.png">
						<figcaption class="legenda">Instalar o pacote office</figcaption>
					</figure>
				</a>
				<a href="_postagem/1009187.html">
					<figure class="post">
						<img class="imgp" src="https://image.ibb.co/dMaZ5f/vnc.png">
						<figcaption class="legenda">Instalar UltraVNC Viewer</figcaption>
					</figure>
				</a>
				
			</section>
		</div>