mfs83 Posted July 31, 2021 Share Posted July 31, 2021 Bonjour j aurai voulu savoir comment je peux faire pour que les images dans le thème classic-rocket soient responsives. Merci Link to comment Share on other sites More sharing options...
Mediacom87 Posted July 31, 2021 Share Posted July 31, 2021 Il y a 8 heures, mfs83 a dit : les images dans le thème classic-rocket soient responsives c'est à dire ? Link to comment Share on other sites More sharing options...
mfs83 Posted July 31, 2021 Author Share Posted July 31, 2021 Que les images toutes les images s'adaptent à tous les grandeurs d'écran Link to comment Share on other sites More sharing options...
Mediacom87 Posted July 31, 2021 Share Posted July 31, 2021 c'est déjà le cas. Link to comment Share on other sites More sharing options...
mfs83 Posted August 3, 2021 Author Share Posted August 3, 2021 Pas quand on ajoute et modifie le thème Link to comment Share on other sites More sharing options...
Manu-41 Posted August 4, 2021 Share Posted August 4, 2021 Bonjour, donnez le lien du site pour voir le problème, car si vous modifier des choses dans le code et que vous supprimez une class, ça ne va plus fonctionner. Link to comment Share on other sites More sharing options...
mfs83 Posted August 4, 2021 Author Share Posted August 4, 2021 je suis en pleine construction du site https://www.tableaux-impression-deco.fr merci Link to comment Share on other sites More sharing options...
Manu-41 Posted August 4, 2021 Share Posted August 4, 2021 ta grande image na pas le css responsive. Il faut l'ajouter dans ton éditeur. Tu utilises quoi pour ajouter l'image ? Link to comment Share on other sites More sharing options...
mfs83 Posted August 4, 2021 Author Share Posted August 4, 2021 comme logiciel ? Link to comment Share on other sites More sharing options...
SmartDataSoft Posted August 4, 2021 Share Posted August 4, 2021 Bonjour, Si vous mettez ce css dans votre fichier css personnalisé de thème ou tout autre module personnalisé comme #header .logo { width: 100%; } .card-body img { width: 100%; height: auto; } l'image sera responsive Merci Link to comment Share on other sites More sharing options...
mfs83 Posted August 4, 2021 Author Share Posted August 4, 2021 ok merci je vais essayer demain matin bonne soirée Link to comment Share on other sites More sharing options...
Mediacom87 Posted August 4, 2021 Share Posted August 4, 2021 n'utilisez surtout pas ce code CSS qui va déformer vos images en risquant de les afficher plus grande que leur format original. Votre template comporte déjà le code nécessaire pour transformer vos images en image responsive, il suffit de leur appliquer la classe existante img-fluid. .img-fluid, .img-thumbnail { max-width: 100%; height: auto; } Link to comment Share on other sites More sharing options...
SmartDataSoft Posted August 5, 2021 Share Posted August 5, 2021 (edited) Oui, c'est vrai ce que propose Mediacom87, éditez votre contenu utilisez la classe qui sort de votre thème. Merci <img src = "https://www.yoursite.fr/img/cms/tableaux-modernes-impression-deco.jpg" alt = "Modern paintings printed for an ultra trendy decoration" width = "900" height = "500 " > sera <img src = "https://www.yoursite.fr/img/cms/tableaux-modernes-impression-deco.jpg" alt = "Modern paintings printed for an ultra trendy decoration" width = "900" height = "500 " class = "img-fluid" > et supprimer cette largeur de code dur #header .logo { max-width: 800px; } Merci Edited August 5, 2021 by SmartDataSoft (see edit history) Link to comment Share on other sites More sharing options...
Mediacom87 Posted August 5, 2021 Share Posted August 5, 2021 il y a 3 minutes, SmartDataSoft a dit : supprimez les paramètres de largeur et de hauteur de l'image ne faite pas ceci non plus car cela provoquerait une incompréhension de votre navigateur dur le traitement de l'image et provoquerait un gros gap CLS très pénalisé par Google depuis quelque temps surtout en affichage mobile. Link to comment Share on other sites More sharing options...
SmartDataSoft Posted August 5, 2021 Share Posted August 5, 2021 Merci @Mediacom87 J'ai fait une erreur, j'ai mis à jour la solution. Cela fonctionnera. 1 Link to comment Share on other sites More sharing options...
mfs83 Posted August 5, 2021 Author Share Posted August 5, 2021 Oui merci à vous tous cela fonctionne. Autre petite question je voudrais que "connexion" et "panier" se retrouvent au même niveau que "contactez-nous", comment puis je faire Merci Link to comment Share on other sites More sharing options...
mfs83 Posted August 5, 2021 Author Share Posted August 5, 2021 Par contre cela me plombe avec cette méthode mon "cumulative layout shift"🙄 Link to comment Share on other sites More sharing options...
SmartDataSoft Posted August 5, 2021 Share Posted August 5, 2021 Bonjour, Vous pouvez vérifier design-> position-> displayTop, le crochet displayNav dont vous avez besoin pour rééditer la position du crochet, puis vérifier qu'ils sont capables du même niveau. Si le thème suit le système PrestaShop standard Merci Link to comment Share on other sites More sharing options...
mfs83 Posted August 5, 2021 Author Share Posted August 5, 2021 merci j'ai positionné les 2 dans Nav2 ça marche Link to comment Share on other sites More sharing options...
SmartDataSoft Posted August 5, 2021 Share Posted August 5, 2021 @mfs83 Content de savoir que ton problème est résolu. Si tout va bien. Vous pouvez changer le titre en [résoudre] et cliquer sur l'icône d'amour Link to comment Share on other sites More sharing options...
mfs83 Posted August 5, 2021 Author Share Posted August 5, 2021 Par contre cela me plombe avec cette méthode mon "cumulative layout shift"🙄 quand les images sont responsive .img-fluid, .img-thumbnail { max-width: 100%; height: auto; } Link to comment Share on other sites More sharing options...
Mediacom87 Posted August 5, 2021 Share Posted August 5, 2021 Il y a 2 heures, mfs83 a dit : Par contre cela me plombe avec cette méthode mon "cumulative layout shift"🙄 quand les images sont responsive .img-fluid, .img-thumbnail { max-width: 100%; height: auto; } Il faut, bien entendu, renseigner les dimensions de vos images. Link to comment Share on other sites More sharing options...
mfs83 Posted August 6, 2021 Author Share Posted August 6, 2021 je comprends plus au début j'avais indiqué les dimensions (voir plus haut) et on m'avait dit de mettre plutôt { max-width: 100%; height: auto; } et là vous me dîtes de mettre les dimensions !!!!! Link to comment Share on other sites More sharing options...
Mediacom87 Posted August 6, 2021 Share Posted August 6, 2021 Le 05/08/2021 à 2:12 AM, Mediacom87 a dit : ne faite pas ceci non plus car cela provoquerait une incompréhension de votre navigateur dur le traitement de l'image et provoquerait un gros gap CLS très pénalisé par Google depuis quelque temps surtout en affichage mobile. Pourtant je fut assez précis sur le sujet depuis le début. Après si vous n'écoutez que celui qui se trompe et non celui qui corrige je ne peux rien faire de plus. Link to comment Share on other sites More sharing options...
mfs83 Posted August 6, 2021 Author Share Posted August 6, 2021 donc il faut que je mette ceci " <img src = "https://www.yoursite.fr/img/cms/tableaux-modernes-impression-deco.jpg" alt = "Modern paintings printed for an ultra trendy decoration" width = "900" height = "500 " class = "img-fluid" > " à la place de cela " <img src = "https://www.yoursite.fr/img/cms/tableaux-modernes-impression-deco.jpg" alt = "Modern paintings printed for an ultra trendy decoration" width = "900" height = "500 " > " mais je le change dans quel dossier, à quel endroit Merci Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now