1
resposta

Aula 8 - Dúvida no último exercício

Alguém conseguiu fazer o último exercício e criar um sprite automático com as logos das plataformas e posicioná-lo corretamente?

Eu consegui criar o sprite automático mas estou tendo problemas para posicionar na horizontal os mesmos e, além disso, aparecem os textos de Android, Apple, Windows e Blackberry do lado dos ícones na vertical. Meu código atual está assim:

Arquivo estilos.scss:

$plataformas-spacing: 10px;
@import 'plataformas/*.png';

Arquivo sobre.scss:

@include all-plataformas-sprites;

.plataformas {}

.plataformas-android, .plataformas-apple,
.plataformas-blackberry, .plataformas-windows {
  padding: 0;
  display: inline-block;
  width: 65px;
  height: 65px;
  @extend %image-replecement;
  margin: 1em 1.5em 0 0;
}

Arquivo index.html:

<ul class="plataformas">
    <li>Apple<span class="plataformas-apple"></li>
    <li>Android<span class="plataformas-android"></li>
    <li>Windows Phone<span class="plataformas-windows"></li>
    <li>BlackBerry<span class="plataformas-blackberry"></li>
</ul>

Essas foram as alterações que fiz, mas o efeito obtido não é o desejado.

1 resposta

Fala ai Rafael, tudo bem? Esses ajustes de layout podem ser necessários pois precisamos ver como foi gerado o sprite final, realizar esses posicionamentos é um pouco chato mesmo.

Tente aplicar os estilos de forma separada e ir ajustando as particularidades para cada contexto e classe.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software