Seeking Solution
In my quest to query and showcase images with a maximum width of 350px, I am hoping to have them displayed inline-block for tablets and larger screens. Ideally, each image would sit next to one another and wrap if they exceed the parent div's size.
Problem Encounter
While I've successfully applied custom CSS styles, the images are not appearing inline or sometimes not rendered at all.
Current Outcome
I've experimented with various options like display: inline-block, float: left, overflow-wrap: break-word, and flex-wrap: wrap, but the images persist in displaying as block elements or remain invisible.
This is the code snippet:
import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
import AccessoryStyles from "./accessory.module.css"
const Accessory = () => (
<StaticQuery
query={graphql`
query {
allFile(
filter: {
extension: { regex: "/(jpg)|(jpeg)|(png)/" }
relativeDirectory: { eq: "Lanka-Belt" }
}
) {
edges {
node {
childImageSharp {
sizes(maxWidth: 350) {
...GatsbyImageSharpSizes_withWebp
presentationWidth
}
}
}
}
}
}
`}
render={data => {
const images = data.allFile.edges.map((image, index) => (
<div className={AccessoryStyles.imageContainer}>
<Img
key={index}
style={{
maxWidth: image.node.childImageSharp.sizes.presentationWidth,
}}
sizes={image.node.childImageSharp.sizes}
/>
</div>
))
return {images}
}
}
/>
)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Below are the custom styles defined in accessory.module.css:
.image-container {
display: inline-block;
}
https://i.sstatic.net/YCIhA.png
Despite spending two days scouring help forums like StackOverflow and GitHub issues related to Gatsby and Gatsby Image, I'm yet to find a resolution.
Your assistance would be highly appreciated. Thank you!