flex wrap
Hi guys I am having trouble making my subheading on my website it has 10 <ul> lists in a div containing words but i cant seem to find away to make it responsive on window resizing. It just seems to overflow no matter what!
I have attached some code and pictures on this any help is appreciated. Thanks!
=======HTML=========
import React from "react";
import HomeImage from "../assets/home-img.jpg";
const subheading = () => {
return (
<section className="hero">
<div className="content">
<div className="service-list">
<ul>Kitchens </ul>
<ul>Bathrooms </ul>
<ul>Outdoor Living Spaces </ul>
<ul>Concreting </ul>
<ul>Plumbing & Heating</ul>
<ul>Joinery & Carpentry</ul>
<ul>Driveways</ul>
<ul>Extensions</ul>
<ul>Bricklaying</ul>
<ul>General Building</ul>
</div>
</div>
</section>
);
};
export default subheading;
======CSS======
.hero {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 5vh;
background-color: #1b1b1b3f;
text-align: center;
}
ul {
display: flex;
flex-wrap: wrap;
}
.content {
display: flex;
color: inherit;
justify-content: flex-end;
align-items: flex-end;
max-height: auto;
text-align: center;
}
1 Reply
I don’t really understand what you are trying to do with your html. Why do you have so many ul elements without their corresponding li children?
In any case, you need to set the flex and flex-wrap on the parent container, in this case “service-list”