Skip to content

Fix responsive behavior of SoSpecial carousel items across screen sizes #7307

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Katotodan wants to merge 5 commits into
base: master
Choose a base branch
from
+56 −81
Open

Fix responsive behavior of SoSpecial carousel items across screen sizes #7307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f83e56c
fix: slider items to shrink on small devices
Katotodan Dec 29, 2025
013f035
Fixing image size on SoSpecial component
Katotodan Dec 31, 2025
8c1d98d
Fixing image size on SoSpecial component.
Katotodan Dec 31, 2025
14617ca
Merge branch 'master' into feature/fix-slider-on-mobile
Rajesh-Nagarajan-11 Jan 5, 2026
225289d
Merge branch 'master' into feature/fix-slider-on-mobile
Rajesh-Nagarajan-11 Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 50 additions & 48 deletions src/sections/Home/So-Special-Section/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

import React from "react";
import React, {useLayoutEffect, useState, useRef} from "react";
import Slider from "react-slick";
import SoSpecialWrapper from "./so-special-style";

Expand All @@ -9,6 +9,9 @@ import Image from "../../../components/image";
// import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";

const SoSpecial = () => {
const [isClient, setIsClient] = useState(false);
const [slidesToShowState, setSlidesToShowState] = useState(null);
const sliderRef = useRef(null);
const data = useStaticQuery(
graphql`query newsList {
allMdx(
Expand Down Expand Up @@ -53,56 +56,55 @@ const SoSpecial = () => {
}`
);
const settings = {
dots: false,
dots: slidesToShowState <= 1,
infinite: false,
speed: 500,
slidesToShow: 2.5,
swipeToSlide: true,

responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 2.2,

}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 2,

}
},
{
breakpoint: 800,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1,
initialSlide: 1
}
},
{
breakpoint: 600,
settings: {
dots: true,
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 1
}
},
{
breakpoint: 400,
settings: {
dots: true,
arrows: false,
slidesToShow: 1,
slidesToScroll: 1
}
}
]
slidesToScroll: 1,
arrows: slidesToShowState !== 1,
slidesToShow: slidesToShowState ?? 2.5,
};

const computeSlides = () => {
const w = typeof window !== "undefined" ? (window.innerWidth || document.documentElement.clientWidth) : 1200;
if (w <= 600) return 1;
if (w <= 800) return 1.5;
if (w <= 1024) return 2;
if (w <= 1200) return 2.2;
return 3;
};

useLayoutEffect(() => {

setIsClient(true);
setSlidesToShowState(computeSlides());

let resizeTimeout = null;
const onResizeDebounced = () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
const slides = computeSlides();
setSlidesToShowState((prev) => {
if (prev !== slides) return slides;
return prev;
});
if (sliderRef.current && sliderRef.current.innerSlider && typeof sliderRef.current.innerSlider.onWindowResized === "function") {
sliderRef.current.innerSlider.onWindowResized();
}
}, 100);
};

window.addEventListener("resize", onResizeDebounced);
window.addEventListener("load", onResizeDebounced);

return () => {
window.removeEventListener("resize", onResizeDebounced);
window.removeEventListener("load", onResizeDebounced);
clearTimeout(resizeTimeout);
};
}, []);

if (!isClient || slidesToShowState === null) return null;

// const { isDark } = useStyledDarkMode();

Expand All @@ -113,7 +115,7 @@ const SoSpecial = () => {
<h1>We're making a splash</h1>
</div>
<div className="special_carousel">
<Slider {...settings}>
<Slider {...settings} key={`review-slider-${slidesToShowState}`} ref={sliderRef}>
{
data.allMdx.nodes.map(({ id, frontmatter, fields }) => (
<Button className="special-cont_btn" $url={fields.slug} key={id}>
Expand Down
39 changes: 6 additions & 33 deletions src/sections/Home/So-Special-Section/so-special-style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const SoSpecialWrapper = styled.div`
.slick-list .slick-track{
width:5000px;
}
@media only screen and (max-width:450px){
@media only screen and (max-width:600px){
padding:1rem;
}
.special_carousel{
Expand Down Expand Up @@ -82,7 +82,7 @@ const SoSpecialWrapper = styled.div`
opacity: 1;
color: ${props => props.theme.secondaryColor};
}
}

.so-special-head{
padding:2rem;
text-align:center;
Expand All @@ -104,17 +104,19 @@ const SoSpecialWrapper = styled.div`
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#special-cont_img{
height:70%;
height:17rem;
width:100%;
overflow:hidden;
.gatsby-image-wrapper, .old-gatsby-image-wrapper{
height:100%;
}
img{
height: inherit;
height: 17rem;
display: block;
text-align: center;
margin: auto;
object-fit: fill !important;
Copy link
Contributor

@kishore08-07 kishore08-07 Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

revert !important.

Copy link
Contributor Author

@Katotodan Katotodan Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kishore08-07 The Image has object-fit set to cover by default.
That was done inside src/components/image.js

import { GatsbyImage } from "gatsby-plugin-image";

const Image = ({ childImageSharp, extension, publicURL, alt, imgStyle, ...rest }) => {

  if (!childImageSharp && extension === "svg") {
    return (
      <div className="old-gatsby-image-wrapper" style={{ width: "100%", height: "auto" }}>
        <img
          src={publicURL}
          alt={alt || "Blog image"}
          width="100%"
          height="auto"
          style={{
            objectFit: imgStyle?.objectFit || "cover",
            ...imgStyle
          }}
        />
      </div>
    );
  }

  return <GatsbyImage
    key={publicURL}
    image={childImageSharp?.gatsbyImageData}
    alt={alt || "Blog image"}
    style={{
      objectFit: imgStyle?.objectFit || "cover",
    }}
    {...rest}
  />;
};

export default Image;

Removing that !important on that line of code is making the default one to win. And the images are not showing well anymore after removing that !important. What do you think?

Copy link
Contributor Author

@Katotodan Katotodan Jan 2, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mr. @kishore08-07 , what is your thought? And seems like Gatsby generate "img" with inline styles, among them object-fit set to cover. So removing that !important make Gatsby image inline style to win.

Copy link
Contributor

@kishore08-07 kishore08-07 Jan 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since the Image component uses object-fit: cover by default, the !important makes sense here.

Copy link
Contributor Author

@Katotodan Katotodan Jan 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kishore08-07 thank you for the review

image-rendering: auto;
}
}
.slick-dots{
Expand Down Expand Up @@ -162,21 +164,8 @@ const SoSpecialWrapper = styled.div`
width:75%;
}
}
@media screen and (min-width: 1199px){
.special-cont_img{
height:20rem;
width:100%;
}
}
@media screen and (max-width: 1199px){
.special-cont_img{
height:20rem;
width:100%;
}
}
@media screen and (max-width: 1024px){
.special_carousel{
margin-bottom: 3rem;
width:80%;
}
.special-cont_img{
Expand All @@ -190,13 +179,8 @@ const SoSpecialWrapper = styled.div`

@media screen and (max-width: 850px){
.special_carousel{
margin-bottom: 3rem;
width:100%;
}
.special-cont_img{
width: 22rem;
max-height: 17rem;
}
.so-special-head{
padding:1rem;
text-align:center;
Expand All @@ -207,19 +191,11 @@ const SoSpecialWrapper = styled.div`
}
}
@media screen and (max-width: 671px){
.special-cont_img{
width: 100%;
max-height: 20rem;
}
.special-cont_content{
padding:0rem;
}
}
@media screen and (max-width: 500px){
#special-cont_img{
width: 100%;
height: 65%;
}
.so-special-head{
padding: 0.5rem 0;
}
Expand All @@ -229,9 +205,6 @@ const SoSpecialWrapper = styled.div`
height:25rem;
margin:0;
}
#special-cont_img{
height: 60%;
}
#special-cont_content{
.special-cont_para
{
Expand Down