Блог

Раздел часто задаваемых вопросов, который я создаю, использует react, и прямо сейчас у меня загружена библиотека react-faq-component, которая есть (заголовок и содержимое — это просто значения по умолчанию, которые прилагаются к нему):

 
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
 

Как бы мне сделать это адаптивным для мобильных устройств, а также центрировать аккордеон на странице? Я предполагаю, что он использовался align-items: center; в стилях, но не работал.

Конечный результат:

 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;
 

Укажите компонент max-width for Faq и укажите main родительские div стили css, приведенные ниже:

css:

 h1,
p {
  font-family: Lato;
}

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

Рабочая демонстрация: Stackblitz