mise en page css

[phil78]

Bonjour à tous,

 

J'ai acheté un thème mais les 3 mois de Sav ont expiré et le développeur n'est pas disponible pour des petites modifications. Il faut donc que je me débrouille seul.

Le site n'est encore en ligne, j'espère donc être assez clair dans mon explication.

En fait je ne suis pas très satisfait du résultat su écran de portable (voir original.jpg) car les articles sont affichés sans titre ni prix (ils ne le sont qu'en cas de survol avec la souris).

J'ai donc modifié display et visibility dans product_list.css (original ci-dessous) afin d'afficher titre et prix. Cependant (voir les deux autres fichiers), mon titre déborde sur la photo de l'article.

Comment puis-je faire pour éviter que le div content ne déborde sur la photo?

Merci d'avance si quelqu'un peut m'illuminer.

 

.product_list li .content {
position: absolute;
left: 0;
bottom: 0;
right: 0;
padding: 10px;
color: #fff;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
text-align: center;
display: block;
visibility: hidden;
opacity: 0;
transition: opacity 300ms ease-in-out, visibility 0ms linear 300ms;
z-index: 3;
}

[doekia]

Juste pour information, le survol de la souris sur un mobile (écran tactile), ça n'existe tout simplement pas.

Avant de jeter le bébé avec l'eau du bain, fait quand même une vérif sur un VRAI périphérique mobile

[phil78]

Bonjour,

 

J'ai testé sur non portable. C'est justement pour cette raison que je souhaite changer la mise en Page.

Edited September 1, 2017 by phil78 (see edit history)

[phil78]

up