feat: styling

category-grid-widget-for-elementor.php

@@ -3,7 +3,7 @@
  * Plugin Name:     Category Grid Widget for Elementor
  * Plugin URI:      https://git.mrraph.fr/WordPress/elementor-category-grid-widget-for-elementor
  * Description:     Responsive article category grid with image for Elementor.
- * Version:         1.3.0
+ * Version:         1.3.1
  * Author:          MrRaph_
  * Author URI:      https://mrraph.photo
  * Requires at least: 5.8
@@ -45,7 +45,7 @@ function ccgw_enqueue_media_uploader($hook_suffix)
         'ccgw-category-image',
         plugin_dir_url(__FILE__) . 'admin/js/category-image.js',
         ['jquery'],
-        '1.3.0',
+        '1.3.1',
         true
     );
 
@@ -223,7 +223,7 @@ function ccgw_enqueue_front_styles()
             'ccgw-category-grid-style',
             plugin_dir_url(__FILE__) . 'css/style.css',
             [],
-            '1.3.0'
+            '1.3.1'
         );
     }
 }

css/style.css

@@ -1,63 +1,45 @@
 /* css/style.css */
+
+/* —————————————————————————————————————————— */
+/*  ZONES GLOBALES (overlay, cartes, images…)   */
+/* —————————————————————————————————————————— */
+
+/* 0) Cartes en conteneur relatif */
 .elementor-category-grid .category-card {
   position: relative;
   overflow: hidden;
+  height: 0;
+  padding-bottom: 40%; /* ratio 5:2 */
 }
 
-/* pseudo-élément overlay */
+/* overlay via pseudo-élément */
 .elementor-category-grid .category-card::before {
   content: "";
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   background-color: transparent;
   transition: opacity .3s ease;
-  pointer-events: none; /* laisse passer le clic */
+  pointer-events: none;
 }
 
-/* 1) Mise en place de la grille */
+/* images pleines cartes */
-.elementor-category-grid {
-  display: grid;
-  gap: 1rem;
-}
-
-/* Nombre de colonnes dynamiques */
-.elementor-category-grid.columns-1 { grid-template-columns: repeat(1, 1fr); }
-.elementor-category-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
-.elementor-category-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
-.elementor-category-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
-.elementor-category-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
-.elementor-category-grid.columns-6 { grid-template-columns: repeat(6, 1fr); }
-
-/* 2) Chaque carte = conteneur relatif */
-.elementor-category-grid .category-card {
-  position: relative;
-  overflow: hidden;
-  height: 0;
-  padding-bottom: 40%; /* ratio 5:2 – ajustez selon vos images */
-  /* border-radius: 8px; */
-}
-
-/* 3) Image pleine carte */
 .elementor-category-grid .category-card img {
   position: absolute;
-  top: 0;
+  top: 0; left: 0;
-  left: 0;
+  width: 100%; height: 100%;
-  width: 100%;
-  height: 100%;
   object-fit: cover;
   transition: transform .4s ease;
 }
 
-/* 4) Effet hover : léger zoom */
+/* zoom au hover */
 .elementor-category-grid .category-card:hover img {
   transform: scale(1.05);
 }
 
-/* 5) Titre centré en overlay */
+/* titre centré */
 .elementor-category-grid .category-card-name {
   position: absolute;
-  top: 50%;
+  top: 50%; left: 50%;
-  left: 50%;
   transform: translate(-50%, -50%);
   margin: 0;
   padding: .5em 1em;
@@ -65,12 +47,49 @@
   line-height: 1.2;
   text-align: center;
   color: #ffffff;
-  /* background: rgba(0, 0, 0, 0.4); */
+  white-space: pre-wrap;
-  /* border-radius: 4px; */
+  word-break: break-word;
-  transition: background .3s ease;
+  transition: font-size .3s ease, padding .3s ease;
 }
 
-/* 6) Hover sur titre : fond un peu plus opaque */
+/* —————————————————————————————————————————— */
-/* .elementor-category-grid .category-card:hover .category-card-name {
+/*           DISPOSITION DE LA GRILLE           */
-  background: rgba(0, 0, 0, 0.6);
+/* —————————————————————————————————————————— */
-} */
+
+/* 1) Par défaut : auto-fit (desktop) */
+.elementor-category-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+
+/* 2) Mobile (≤ 480px) → 1 colonne forcée */
+@media screen and (max-width: 480px) {
+  .elementor-category-grid {
+    grid-template-columns: repeat(1, 1fr) !important;
+  }
+  .elementor-category-grid .category-card-name {
+    font-size: 1rem;
+    padding: .4em .8em;
+  }
+}
+
+/* 3) Tablette (481px–768px) → 2 colonnes */
+@media screen and (min-width: 481px) and (max-width: 768px) {
+  .elementor-category-grid {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+  .elementor-category-grid .category-card-name {
+    font-size: 1.2rem;
+  }
+}
+
+/* 4) Desktop (≥ 769px) → respect des classes columns-X */
+@media screen and (min-width: 769px) {
+  .elementor-category-grid.columns-1 { grid-template-columns: repeat(1, 1fr); }
+  .elementor-category-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
+  .elementor-category-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
+  .elementor-category-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
+  .elementor-category-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
+  .elementor-category-grid.columns-6 { grid-template-columns: repeat(6, 1fr); }
+}

readme.txt

@@ -5,7 +5,7 @@ Tags: elementor, category, grid, widget, posts
 Requires at least: 5.8
 Tested up to: 6.8
 Requires PHP: 7.0
-Stable tag: 1.3.0
+Stable tag: 1.3.1
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Responsive grid of post categories with images for Elementor.
@@ -46,6 +46,9 @@ Yes, enable the **“Hide categories without image”** option in the widget’s
 Open the **Style » Hover** tab: choose the overlay color & opacity, and the title color on hover.
 
 == Changelog ==
+= 1.3.1 = 
+* Make style responsive
+
 = 1.3.0 =
 * Added more option to handle subcategories