diff --git a/src/components/courses/CoursesCarousel.js b/src/components/courses/CoursesCarousel.js
index 7db2af6..761025b 100644
--- a/src/components/courses/CoursesCarousel.js
+++ b/src/components/courses/CoursesCarousel.js
@@ -76,7 +76,7 @@ export default function CoursesCarousel() {
         const { width, height } = calculateImageDimensions();
         return (
             <div style={{width: width < 768 ? "auto" : width}} onClick={() => router.push(`/details/${course.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md shadow-lg">
-                <div style={{maxWidth: width}} className="max-tab:h-auto max-mob:h-auto">
+                <div style={{maxWidth: width, minWidth: width}} className="max-tab:h-auto max-mob:h-auto">
                     <Image
                         alt="resource thumbnail"
                         src={returnImageProxy(course.image)}
diff --git a/src/components/workshops/WorkshopsCarousel.js b/src/components/workshops/WorkshopsCarousel.js
index f456c53..ba323ef 100644
--- a/src/components/workshops/WorkshopsCarousel.js
+++ b/src/components/workshops/WorkshopsCarousel.js
@@ -74,7 +74,7 @@ export default function WorkshopsCarousel() {
         const { width, height } = calculateImageDimensions();
         return (
             <div style={{width: width < 768 ? "auto" : width}} onClick={() => router.push(`/details/${workshop.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md shadow-lg">
-                <div style={{maxWidth: width}} className="max-tab:h-auto max-mob:h-auto">
+                <div style={{maxWidth: width, minWidth: width}} className="max-tab:h-auto max-mob:h-auto">
                     <Image
                         alt="resource thumbnail"
                         src={returnImageProxy(workshop.image)}