Publicado em 8 de mai.

Conteúdo responsive

#javascript #css #desenvolvimento-frontend #html #responsive

Olá, tenho esse script

https://codepen.io/anon/pen/JNOePX clique na opção click me e veja que um menu lateral aparece do lado direito, porém quando ele aparece, a imagem da pagina é jogada a esquerda para fora da pagina, eu gostaria de deixar essa imagem responsiva, ou seja... quando clicar para aparecer o menu, ela se ajeite, sem ultrapassar e assim cortando pedaço como está.

Sei que isso é uma dúvida de noob, mais já pesquisei de tudo e não achei, por isso venho aqui pedir a ajuda de vocês, como eu poderia resolver isso?

obrigado!

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Eziquiel· 8 de mai.

Olá.

Apenas acrescente mais um parâmetro na função "animate", que no caso é o "padding-left".

Suas duas funções seguintes devem ficar assim:

function openSidepage() {
 $('#mainpage').animate({
 right: '350px','padding-left':'350px'
 }, 400, 'easeOutBack');

 }

 function closeSidepage(){
 $("#navigation li a").removeClass("open");
 $('#mainpage').animate({
 right: '0px','padding-left':'0px'
 }, 400, 'easeOutQuint');
 }

	Acrescentei o parâmetro "**padding-left**" para compensar o deslocamento da div "**#mainpage**".

	Veja o exemplo modificado:

	[https://codepen.io/Eziquiel/pen/JNOwJB?editors=0110](https://codepen.io/Eziquiel/pen/JNOwJB?editors=0110)

Iskandar· 8 de mai.

Pra falar de responsividade, recomendo esquecer a unidade de medida 'px' e começar a trabalhar com 'em/rem' e '%'.

Sara Alves· 8 de mai.

Obrigado pela ajuda Ezequiel, consegui compreender :D Iskandar, vou ler mais a respeito obrigado pelo conselho.