Será que é possível adicionar uma escala adaptativa? Eu gostaria de ter um componente de barra lateral no lado direito.
CSS
/* Obtém a largura do avatar do usuário e define a largura máxima do contêiner do anúncio */
/* Estilos do contêiner do anúncio */
#list-area {
display: flex; /* Organiza os anúncios usando flexbox */
flex-direction: column; /* Exibe os anúncios verticalmente */
gap: 0; /* Remove o espaçamento entre as imagens dos anúncios */
padding: 0; /* Remove o preenchimento do contêiner */
margin: 0; /* Garante que não haja margem extra ao redor do contêiner do anúncio */
max-width: 812px; /* Limita a largura do contêiner do anúncio a um máximo de 812px (largura do avatar: 48px) */
}
/* Estilos do link do anúncio */
.banner-ad {
display: block; /* Torna o contêiner do anúncio um elemento de bloco */
width: 100%; /* Garante que o contêiner do anúncio ocupe 100% da largura */
max-width: 100%; /* Evita exceder a largura máxima */
margin: 0; /* Remove o espaçamento entre os contêineres de anúncios */
}
/* Estilos da imagem do anúncio responsiva */
.ad-image {
width: 100%; /* Garante que a imagem ocupe a largura total de seu pai */
height: auto; /* Mantém a proporção original da imagem */
max-width: 100%; /* Evita que a imagem exceda a largura máxima de seu contêiner */
display: block; /* Corrige o problema de espaço em branco na parte inferior das imagens */
margin: 0; /* Remove qualquer espaço adicional ao redor da imagem */
}
/* Design Responsivo: Ajusta a exibição do anúncio para telas grandes e pequenas */
/* Ajusta a exibição do anúncio em dispositivos com largura inferior a 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Garante que não haja preenchimento extra em dispositivos móveis */
}
.banner-ad {
width: 100%; /* Garante que o anúncio ocupe a largura total em telas pequenas */
}
.ad-image {
width: 100%; /* Garante que a imagem se adapte à largura do contêiner */
height: auto; /* Mantém a proporção da imagem */
}
}
/* Ajusta ainda mais as imagens de anúncios em dispositivos muito pequenos (por exemplo, telefones em modo retrato) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Garante que as imagens se adaptem à largura da tela do telefone */
max-width: 100%; /* Define a largura máxima como 100% para evitar superdimensionamento */
height: auto; /* Mantém a proporção da imagem */
}
}
