CODEWITHSUNDEEP
reactjsaccordion
penguinsss1233
penguinsss1233

Reputation: 43

How would I make this accordion responsive and also centered on the page?

The FAQ Section I am building is using react and right now I have the react-faq-component library loaded which is(The title and content is just the default that comes with it):


import Faq from 'react-faq-component';

const data = {
  title: "FAQ (How it works)",
  rows: [
    {
      title: "Lorem ipsum dolor sit amet,",
      content: "Lorem ipsum dolor sit amet, consectetur "
    },
    {
      title: "Nunc maximus, magna at ultricies elementum",
      content: "Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam."
    },
    {
      title: "Curabitur laoreet, mauris vel blandit fringilla",
      content: "Curabitur laoreet, mauris vel blandit fringilla, leo elit rhoncus nunc"
    },
    {
      title: "What is the package version",
      content: "v1.0.5"
    }]
}

const FAQ = () => {
    return (
        <div>
             <Faq data={data}/>
        </div>
    )
}

export default FAQ

How would I go about making this responsive for mobile devices and also center the accordion on the page? I assume it was using align-items: center; in the styles but not working.

Upvotes: 2

Views: 472

Answers (1)

Ketan Ramteke
Ketan Ramteke

Reputation: 10675

Final Output:

enter image description here

import React from "react";
import "./style.css";
import Faq from "react-faq-component";

const data = {
  title: "FAQ (How it works)",
  rows: [
    {
      title: "Lorem ipsum dolor sit amet,",
      content: "Lorem ipsum dolor sit amet, consectetur "
    },
    {
      title: "Nunc maximus, magna at ultricies elementum",
      content:
        "Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam."
    },
    {
      title: "Curabitur laoreet, mauris vel blandit fringilla",
      content:
        "Curabitur laoreet, mauris vel blandit fringilla, leo elit rhoncus nunc"
    },
    {
      title: "What is the package version",
      content: "v1.0.5"
    }
  ]
};

const FAQ = () => {
  return (
    <div className="main">
      <div className="faq">
        <Faq data={data} />
      </div>
    </div>
  );
};

export default FAQ;

Specify the max-width for Faq component, and give main parent div css styles of given below:

css:

h1,
p {
  font-family: Lato;
}

.main {
  display: flex;
  width: 100%;
  padding-top: 10px;
  justify-content: center;
}
.faq {
  max-width: 400px;
}

Working Demo: Stackblitz

Upvotes: 4

Related Questions