Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

As imagens aparecem mas não se ajustam apesar de estarem no CSS

Referente ao curso Sass e Compass: Descomplicando o CSS, no capítulo Compass e atividade Outro sprite

por Fernando José Correia
| 175.8k xp | 6 posts
<ul class="plataforma">
                    <li class="plataformas-logo-apple">Apple</li>
                    <li class="plataformas-logo-android">Android</li>
                    <li class="plataformas-logo-windows">Windows Phone</li>
                    <li class="plataformas-logo-blackberry">BlackBerry</li>
                </ul>

Minhas imagens aparecem mas não se movem para o local certo apesar de aparecer no CSS como estando movidas

.plataforma li {
  display: inline-block;
  width: 50px;
  height: 60px;
  background-position: center;
  margin: 1em 1.5em 0 0;
  @extend %image-replacement;
}

@include all-plataformas-sprites;
.plataformas-logo-android,
.plataformas-logo-apple,
.plataformas-logo-blackberry,
.plataformas-logo-windows {
  width: 50px;
  height: 50px;
}

No CSS

.plataforma li {
  display: inline-block;
  width: 50px;
  height: 60px;
  background-position: center;
  margin: 1em 1.5em 0 0;
}

.plataformas-logo-android {
  background-position: 0 0;
}

.plataformas-logo-apple {
  background-position: 0 -65px;
}

.plataformas-logo-blackberry {
  background-position: 0 -131px;
}

.plataformas-logo-windows {
  background-position: 0 -181px;
}

.plataformas-logo-android,
.plataformas-logo-apple,
.plataformas-logo-blackberry,
.plataformas-logo-windows {
  width: 50px;
  height: 50px;
}
2 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Fernando, tudo bem? Consegue me passar mais detalhes de como está hoje e como deveria estar? Já fiz esse curso há muito tempo.

Outro detalhe, se conseguir compartilhar o projeto completo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

solução!
por Manuella Guimarães
| 43.2k xp | 11 posts

Olá, Fernando!

Estava tendo trabalho com essa parte também. A solução que eu encontrei foi retirar o posicionamento centralizado e aumentar a largura pra que o logo-blackberry aparecesse por inteiro.

SCSS Antigo :

  .plataformas li {
    display: inline-block;
    width: 50px;
    height: 60px;
    @extend %image-replacement;
    background-position: center;
    margin: 1em 1.5em 0 0;
  }

  .plataformas li:nth-child(1) {
    background-image: url(../imagens/logo-apple.png);
  }

  .plataformas li:nth-child(2) {
    background-image: url(../imagens/logo-android.png);
  }

  .plataformas li:nth-child(3) {
    background-image: url(../imagens/logo-windows.png);
  }

  .plataformas li:nth-child(4) {
    background-image: url(../imagens/logo-blackberry.png);
  }

CSS Antigo:

.plataformas-logo-android {
  background-position: 0 0;
}

.plataformas-logo-apple {
  background-position: 0 -80px;
}

.plataformas-logo-blackberry {
  background-position: 0 -161px;
}

.plataformas-logo-windows {
  background-position: 0 -226px;
}

.plataformas li {
  display: inline-block;
  width: 65px;
  height: 60px;
  margin: 1em 1.5em 0 0;
}

SCSS Novo: 

  @include all-plataformas-sprites;
  .plataformas li {
    display: inline-block;
    width: 65px;
    height: 60px;
    @extend %image-replacement;
    margin: 1em 1.5em 0 0;
  }

CSS Novo:

.plataformas-logo-android {
  background-position: 0 0;
}

.plataformas-logo-apple {
  background-position: 0 -80px;
}

.plataformas-logo-blackberry {
  background-position: 0 -161px;
}

.plataformas-logo-windows {
  background-position: 0 -226px;
}

.plataformas li {
  display: inline-block;
  width: 65px;
  height: 60px;
  margin: 1em 1.5em 0 0;
}