KP-C

Kevin Powell - Community•12mo ago•

1 reply

walton

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;
}