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;
}
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;
}
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
