Fix responsive behavior of SoSpecial carousel items across screen sizes #7307
Conversation
Signed-off-by: DANIEL KATOTO <[email protected]>
|
🚀 Preview for commit f83e56c at: https://6952c83dfa81b7936b9b64b4--layer5.netlify.app |
kishore08-07
left a comment
kishore08-07
left a comment
There was a problem hiding this comment.
Text is overlapping, Adjust the card width and layout for smaller screens to ensure proper content spacing.
kishore08-07
left a comment
kishore08-07
left a comment
There was a problem hiding this comment.
@Katotodan
Use the Related Resources section on https://layer5.io/solutions/platform-engineering as the reference for the expected behavior.
Signed-off-by: DANIEL KATOTO <[email protected]>
|
🚀 Preview for commit 013f035 at: https://69550b75eb2fb35344b02635--layer5.netlify.app |
|
@kishore08-07 Can you take a look please? |
Signed-off-by: DANIEL KATOTO <[email protected]>
|
🚀 Preview for commit 8c1d98d at: https://69552fdd914961d5ff8e4ef8--layer5.netlify.app |
|
@kishore08-07 I have done so, please review |
| display: block; | ||
| text-align: center; | ||
| margin: auto; | ||
| object-fit: fill !important; |
There was a problem hiding this comment.
@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?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
since the Image component uses object-fit: cover by default, the !important makes sense here.
|
🚀 Preview for commit 14617ca at: https://695bd248842366cbd115c499--layer5.netlify.app |
|
🚀 Preview for commit 225289d at: https://695d31102932d09ca67b6f85--layer5.netlify.app |
|
@Rajesh-Nagarajan-11 thanks for reviewing my PR! |
4 participants
Description
This PR fixes a rendering issue in the SoSpecial carousel where slider items were shrinking on small devices.
The root cause was related to Gatsby’s SSR behavior: the slider was initially rendered on the server without access to viewport-dependent values used in the slider settings (inside settings > responsive array), causing react-slick to compute incorrect dimensions.
To fix this, SSR rendering was kind of disabled for this specific component, and the slider settings are now adjusted programmatically on the client based on the current screen size. This ensures consistent and stable rendering across all breakpoints.
This PR fixes #7305
Here is the picture before
After
Notes for Reviewers
Signed commits