[RÉSOLU] HTML/CSS je ne comprends rien -_- Image et texte à aligner...

[Miharaa]

Bonjour '

 

Cela fait quelques jours que je cherche mais je ne trouve pas la réponse...

 

En fait, je n'y connaît strictement rien à tout ce qui est HTML/CSS et compagnie... Je suis une débutant et j'apprends par moi-même avec le pouvoir d'internet !

 

Bref, on refait peau neuve pour notre site web, je suis dans les derniers correctifs avant la mise en ligne officielle le 24 août prochain.

 

J'ai quelques problèmes dont j'attends les réponses des créateurs du thème ... mais j'ai d'autres petites questions à part que vous pourrez probablement me répondre !!!! (S'il vous plaît que j'en finisse avec ce site lol!!)

 

En allant ici :   dev.saveurssante.com

 

Si vous descendez à "Comment fonctionne Saveurs Santé"   ... vous remarquerez que les textes ne sont pas égaux, sont "écrasés" et les petites lignes qui séparent les textes sont grises plutôt que blanches..

 

J'ai fait des tonnes de tests pour tenter de laisser un peu plus d'espace pour chaque texte, mais si j'augmente le "col-lg-3" à "col-lg-4" ça devient beaucoup trop grand et un texte se retrouve sur la 2e ligne... Je ne sais tellement pas comment faire pour que ce soit écrit un peu plus gros, moins "écrasé" et le texte plus justifié. Avez-vous des suggestions ou les codes pour ajuster tout ça ?

 

Ensuite autre petit problème à m'arracher les cheveux   si vous descendez en bas du genre de carrousel (un autre problème dont j'attends des réponses des dev du thème... Je suis incapable de mettre une image en background avec leur thème ainsi que de traduire le "Featured product" ... Ça reste en anglais malgré tout mes changements.......)

 

Bref lol, en descendant en dessous, la où il y a la photo d'une femme blonde avec un texte.... Vous verrez que l'image est décallée vers la droite.... À la base c'est un bloc module pour mettre des témoignages de clients, mais on s'est dit seulement qu'on mettrait un mot de la présidente... J'ai donc sélectionné le mode "custom html" et ajouté l'image tout simplement... mais elle reste décallée.... J'ai tenté les "text-align left" et tout code que j'ai pu trouver sur internet, mais ça ne fait juste rien :/ ... je ne comprends rien et je ne sais pas quoi faire pour que tout l'espace vide soit remplie par l'image !!!!

 

Pitié à l'aide !!! J'ai besoin de votre expertiseee

 

Merciiiiiiiii !!!!

Edited August 17, 2017 by Miharaa (see edit history)

[Baba deCode]

Salut,

 

Si vous descendez à "Comment fonctionne Saveurs Santé" ... vous remarquerez que les textes ne sont pas égaux, sont "écrasés" et les petites lignes qui séparent les textes sont grises plutôt que blanches..

 

 

Pour avoir les lignes blanches, dans /themes/jms_freshfood/css/global.css lignes 2158

modifier:

.adv-title::before {
    background: #ffffff none repeat scroll 0 0;
    bottom: 0;
    content: "";
    display: inline-block;
    height: 1px;
    left: 50%;
    position: absolute;
    width: 70px;
}

Pour augmenter la taille de la police et justifier le texte des paragraphe tjs dans le global.css ligne 2148

.adv-title {
    display: inline-block;
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    position: relative;
    line-height: 25px;
    text-align: justify;
}

Edited August 14, 2017 by Alexandre Carette (see edit history)

[Baba deCode]

Pour l'image en background, elle se trouve ici:

https://dev.saveurssante.com/themes/jms_freshfood/img/bg1.jpg

donc tu crées une image de 1920 pixel par 1353 pixel sur photoshop que tu nomme bg1.jpg

 

avec filezilla tu écrases cette image qui est dans /themes/jms_freshfood/img/

 

Pour la traduction il faut voir dans le code si la chaine de caractère est traductible si oui il faut aller dans localisation / traduction du backoffice

[Miharaa]

 

Salut,

 

 

Pour avoir les lignes blanches, dans /themes/jms_freshfood/css/global.css lignes 2158

modifier:

.adv-title::before {
    background: #ffffff none repeat scroll 0 0;
    bottom: 0;
    content: "";
    display: inline-block;
    height: 1px;
    left: 50%;
    position: absolute;
    width: 70px;
}

Pour augmenter la taille de la police et justifier le texte des paragraphe tjs dans le global.css ligne 2148

.adv-title {
    display: inline-block;
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    position: relative;
    line-height: 25px;
    text-align: justify;
}

AAAAAH MERCIIIIIIIIIIIIIIIIIIIIIIIIIII

 

Enfin ça marche !!!! J'ai même trouvé comment réduire les marges un peu plus, maintenant c'est vraiment comme je voulais !!!!

 

Pareil pour les background, j'ai écrasé les bg1 et bg2.... ça marcheeeee !!!

 

Merciiiiii merci et encore merci !!! Vous me sauvez tellement de temps :D

 

Bonne journée !