Pb affichage sur la home prest 1.6

[Manu-41]

Bonjour,

j'utilise le theme par défault de presta 1.6, et je souhait le modifier.

 

J'ai donc crée une page cms de test et cela s'affiche très bien.

 

Le souci arrive quand je met mon code dans l'éditeur de page d'accueil, les images redeviennent en 1000px (au lieu de s'adapter au site) l'affichage n'est plus comme ma page de test cms.

 

Il doit avoir un souci avec la home. quelqu'un peut-il m'aider?

 

Merci pour vos conseils précieux.

 

[Hubert E-connecteur]

Bonjour,

 

Idéalement, avez-vous une page en ligne pour tester le souci ? 

Sur la largeur des images, il y a la possibilité d'ajouter une classe pour régler le souci :

<img src="/votreImage.jpg" class="img-responsive" />

La classe img-responsive permet de définir la largeur maximum des images (via le framework CSS bootstrapCSS).

[Manu-41]

Bonjour,

 

Idéalement, avez-vous une page en ligne pour tester le souci ? 

Sur la largeur des images, il y a la possibilité d'ajouter une classe pour régler le souci :

<img src="/votreImage.jpg" class="img-responsive" />

La classe img-responsive permet de définir la largeur maximum des images (via le framework CSS bootstrapCSS).

Merci pour ta réponse.

voici ce que j'ai pour l'image:

<img src="https:mon-image" alt="9f341869de89065a18f2828ebe0da7fb0dc057f4" width="1000" height="1000" /></a>

Mais sur une page test cela s'affiche très bien (voir mp que je t'ai envoyé)

D'ou ma question

[Hubert E-connecteur]

Et bien sur les pages CMS, vous avez cette propriété CSS qui fait que les images sont réduites :

#cms #center_column img {
    margin: 4px 0 17px;
    max-width: 100%;
    height: auto;
}

En clair, toutes les images dans des pages CMS auront pour taille maximum 100% du conteneur.

 

Soit vous ajoutez la classe CSS img-responsive à chaque image de la page, soit vous ajoutez la propriété CSS dans votre fichier global.css :

#index #columns img {
    max-width: 100%;
    height: auto;
}

[Manu-41]

 

Et bien sur les pages CMS, vous avez cette propriété CSS qui fait que les images sont réduites :

#cms #center_column img {
    margin: 4px 0 17px;
    max-width: 100%;
    height: auto;
}

En clair, toutes les images dans des pages CMS auront pour taille maximum 100% du conteneur.

 

Soit vous ajoutez la classe CSS img-responsive à chaque image de la page, soit vous ajoutez la propriété CSS dans votre fichier global.css :

#index #columns img {
    max-width: 100%;
    height: auto;
}

 

J'ai donc testé en modifiant le golbal, c'est quand même mieux! un grand merci pour ton aide.

 

Il reste que l'affichage ne se fait pas vraiment pareil, car des espaces ne sont plus là par exemple.

Car les boutons touchent les images par exemple (contrairement à ma page de test),

[Hubert E-connecteur]

Vous pouvez juste ajouter la ligne :

margin: 4px 0 17px;

Dans les lignes que vous avez ajoutées sur le global CSS, ça devrait le faire.

[Manu-41]

Vous pouvez juste ajouter la ligne :

margin: 4px 0 17px;

Dans les lignes que vous avez ajoutées sur le global CSS, ça devrait le faire.

Super! c'est ok.

merci pour ton aide