I have searched for solutions online, but nothing seems to work for me. I am facing an issue with my webpage that has multiple sections, and I want to display them one after the other vertically.
Here is the code snippet:
import React from 'react';
import './Profile.css';
import UserProfile from '../assets/fake/studentinfo'
import TextContents from '../assets/translations/TextContents';
import Gallery from 'react-grid-gallery';
import DetailReview from '../components/materialdesign/DetailReview';
class Profiles extends React.Component{
render(){
const IMAGES =
[{
src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
thumbnailWidth: 156,
thumbnailHeight: 156
},
{
src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
thumbnailWidth: 156,
thumbnailHeight: 156
},
{
src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg",
thumbnail: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_n.jpg",
thumbnailWidth: 156,
thumbnailHeight: 156
},
{
src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
thumbnailWidth: 156,
thumbnailHeight: 156
}]
// The remaining JSX code has been modified
}
}
export default Profiles;
and here's the relevant CSS:
.profile-container {
margin-top: 3rem;
margin-bottom:5rem;
}
...
However, despite this setup, the layout appears different than expected:
https://i.sstatic.net/WTPuY.jpg
The text "let's put the tabs layout", Reviews,... should ideally be positioned below the image gallery. Any insights on why this might not be happening?