How to make the result card/list responsive? - reactivesearch

Question

I am trying to make a filter based search using reactive search. However, I am stuck with the result card implementation. Currently, the result card only displays specific content from my elastic search database. However, I need the result card to be responsive in the sense that when a result card is clicked, a popup should be rendered on the screen displaying the additional details of the particular search result.
I have tried implementing a few CSS and Javascript popups, but am unable to render the contents of each search item.
<ResultCard
componentId="results"
dataField="original_title"
react={{
and: [
"mainSearch",
"RangeSlider",
"Brand-list",
"Segment-list",
"fuel-list"
]
}}
pagination={true}
className="Result_card"
paginationAt="bottom"
pages={5}
size={12}
Loader="Loading..."
noResults="No results were found..."
sortOptions={[
{
dataField: "Price__in_Lakhs_",
sortBy: "asc",
label: "Sort by Price (Low to High) \u00A0"
},
{
dataField: "Price__in_Lakhs_",
sortBy: "desc",
label: "Sort by Price (High to Low) \u00A0 \u00A0"
},
{
dataField: "Variants.keyword",
sortBy: "asc",
label: "Sort by Variant (A-Z) \u00A0"
}
]}
innerClass={{
title: "result-title",
listItem: "result-item",
list: "list-container",
sortOptions: "sort-options",
resultStats: "result-stats",
resultsInfo: "result-list-info"
}}
onData={function(res) {
return {
description: (
<div className="main-description">
<div className="ih-item square effect6 top_to_bottom">
<a target="#" href={"" + res.Index}>
<div className="img">
<img
src={"" + res.Index}
alt={""}
className="result-image"
/>
</div>
<div className="info colored">
<h3 className="overlay-title">
{res.Variants}
<div className="overlay-description">
{res.Model}
</div>
<div className="overlay-info">
<div className="rating-time-score-container">
<div className="sub-title Rating-data">
<b>
Price:
<span className="details">
{" "}
{res.Price__in_Lakhs_}
{" Lakhs"}
</span>
</b>
</div>
<div className="sub-title Score-data">
<b>
Segment:
<span className="details">
{" "}
{res.Segment}
</span>
</b>
</div>
</div>
<div className="revenue-lang-container">
<div className="revenue-data">
<b>
<span>Brand: </span>{" "}
<span className="details">
{" "}
{res.Brand}
</span>{" "}
</b>
</div>
<div className="sub-title language-data">
<b>
Mileage:
<span className="details">
{" "}
{res.Mileage__ARAI_} Kmpl
</span>
</b>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
),
};
}}
/>

Answer 1

Maybe this thread might help you: https://stackoverflow.com/a/56685332/9119053 .
If this not what you are looking for can you, please give a proper context and also there seems to be some styling issue with the code as well.