Mobile/pc layout issue for images

• 

  guillaumeecoscien · Membre · septembre 6, 2023 at 8:27

  • Copier le lien
  • Ajouter le thème aux favoris

  Good morning

  I have an annoying difference between the mobile version and the PC version to display my images correctly.

  For example, on this page: https://voyages-ecoscien.com/atelier-lotus-siem-reap/

  To clearly see the problem, I placed my 3 images with 2 different methods.

  On the PC version, I would like my images to appear like the first 3 images, large, and not like the last 3, small:

  

  But the mobile version is the opposite. They appear small on the 1st line, and large on the 2nd line:

  

  For the first row, I created a layout grid, with a column inside, then an image gallery.

  For the second line, it’s just an image gallery.

  I tried to juggle the additional « alignfull » CSS classes without success.

  Could you help me to render the first line on PC and the rendering of the second line on Mobile?

  L’adresse du blog concerné est (visible uniquement pour les utilisateurs connectés).

• 

  guillaumeecoscien · Membre · septembre 6, 2023 at 8:29

  • Copier le lien

  Bon, j’ai écrit en anglais…, c’était pas pour ici… alors revoici en francais xD

  J’ai une différence embêtante entre la version mobile et la version PC pour afficher mes images correctement.
  
  Par exemple, sur cette page : https://voyages-ecoscien.com/atelier-lotus-siem-reap/
  
  Pour bien voir le problème, j’ai placé mes 3 images avec 2 méthodes différentes.
  
  Sur la version PC, j’aimerais que mes images apparaissent comme les 3 premières images, en grand, et non comme les 3 dernières, en petit :

  

  Mais la version mobile, c’est l’inverse. Elles apparaissent en petit sur la 1ʳᵉ ligne, et en grand sur la 2ᵉ ligne :

  

  Pour la première ligne, j’ai créé une grille de mise en page, avec, dedans, une colonne, puis une galerie d’images.

  Pour la deuxième ligne, c’est juste une galerie d’images.

  J’ai tenté de jongler avec les classes CSS additionnelle « alignfull » sans succès.
  
  Pourriez-vous m’aider à avoir le rendu de la première ligne sur PC et le rendu de la seconde ligne sur Mobile ?

• 

  guillaumeecoscien · Membre · septembre 7, 2023 at 8:00

  • Copier le lien

  J’ai trouvé !

  J’ai mis une « Grille de mise en page » puis une « Galerie » dedans.

  La grille de mise en page a la classe css additionnelle « alignfull column1-desktop-grid__span-10 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1- mobile-grid__span-4 column1-mobile-grid__row-1« .