naman_panwar_gnpl/Gyannetra_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update webinar videos grid layout to 4/3/2/1 column responsive system

Browse Source 
- Changed desktop grid from auto-fit to fixed 4 columns
- Implemented responsive breakpoints:
  * Desktop (>1200px): 4 columns
  * Medium Desktop/Tablet (1200px): 3 columns
  * Tablet/Medium Screens (900px): 2 columns
  * Mobile/Small Screens (600px): 1 column
- Maintained all existing styling, animations and design
This commit is contained in:
ectasy663
2025-05-31 16:14:03 +05:30
parent cb9abe9ae9
commit ccc9da3ddd
1 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
css/style.css
View File

@@ -4090,7 +4090,7 @@ body {
.webinar-videos-grid { .webinar-videos-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); grid-template-columns: repeat(4, 1fr);
gap: 30px; gap: 30px;
margin-top: 60px; margin-top: 60px;
} }
@@ -4156,14 +4156,26 @@ body {
} }
/* Responsive Design for Webinar Videos */ /* Responsive Design for Webinar Videos */
/* Large Desktop: 4 columns (default above 1200px) */
/* Medium Desktop/Large Tablet: 3 columns */
@media (max-width: 1200px) { @media (max-width: 1200px) {
.webinar-videos-grid { .webinar-videos-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-template-columns: repeat(3, 1fr);
gap: 25px; gap: 25px;
} }
} }
@media (max-width: 768px) { /* Tablet/Medium Screens: 2 columns */
@media (max-width: 900px) {
.webinar-videos-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/* Mobile/Small Screens: 1 column */
@media (max-width: 600px) {
.webinar-videos-section { .webinar-videos-section {
padding: 60px 0; padding: 60px 0;
} }
@@ -4187,6 +4199,7 @@ body {
} }
} }
/* Extra Small Mobile: 1 column with optimizations */
@media (max-width: 480px) { @media (max-width: 480px) {
.webinar-videos-grid { .webinar-videos-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;