terça-feira, 28 de julho de 2015

Como colocar imagens do post com o mesmo tamanho? - Modelo Travel e Modelo Espetacular Ltda. (Blogspot)



Bom gente.... Mudei o modelo do meu blog e vou vê se me acostumo com ele. Porem, tive uns probleminhas com o tamanho de todo o layout e principalmente nas imagens iniciais que coloco no post. Quando determinei uma largura digamos "pequena" as imagens iniciais não se adequaram. Elas ficaram passando.

Confira:



Antes quando eu tinha o Modelo Travel era tudo mais simples e fácil. É recomodadíssimo para quem é iniciante ter esse modelo e você irá encontrar tutoriais a bessa. Por ser são fácil eu editava assim:


Modelo Travel/Viagem.

Tentativa 1

Modelo> Editar Html > Ctrl+F e procurre por:
.main-inner .column-center-outer {
acima dele coloque o código:

.post img {
max-width: 520px;
height: auto;
}

altere o vermelho até ficar num tamanho adequado

Confira:



Tentativa 2

ModeloEditar Html Ctrl+F procurre por:

/* Posts
----------------------------------------------- */

abaixo dele coloque o código:

.post img {
max-width: 520px;
height: auto;
}

altere o vermelho até ficar num tamanho adequado

Confira:



Tentativa 3

ModeloEditar Html Ctrl+F procurre por:
]]></b:skin>
 acima dele coloque o código:

.post img {
max-width: 520px;
height: auto;
}

altere o vermelho até ficar num tamanho adequado

Confira:






Modelo Espetaular Ltda.

Tentativa 1

ModeloEditar Html Ctrl+F procurre por:
.post-body img {

e abaixo de todo o código:

.post-body img {
  padding: 8px;
  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .0);
  -webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .0);
  box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .0);

  -moz-border-radius: $(image.border.radius);
  -webkit-border-radius: $(image.border.radius);
  border-radius: $(image.border.radius);


coloque este código:

.post img {
max-width: 520px;
height: auto;
}

altere o vermelho até ficar num tamanho adequado

Confira:




dependendo do código, neste modelo nem sempre funciona quando é colocado abaixo de
/* Posts
----------------------------------------------- */
é arriscado aumentar todaaas as imagens. Quando coloquei por essa tentativa que mostrei acima, deu super certo. É tanto que vim logo correndo fazer este post. Espero que com você também!

Beijos!




Nenhum comentário:

Postar um comentário

Hey!
Fique a vontade ao comentar! Sem xingamentos por favor!

Muito obrigada!♥