break line in a flex layout responsive

Question

how can I make "div.header-title" center itself (max-width at 750px). Each H1,H2, H3 below should be a new line aligned left.

.header-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

h2 {
display:block;
text-align:left;
}

<div class="header-title">
    <h1 class="title">Title 1</h1>
    <h2 class="author">Author</h2>
    <h2 class="author-info ">more from <a href="#">Author</a></h2>
</div>

Does this answer your question? [How to specify line breaks in a multi-line flexbox layout?](https://stackoverflow.com/questions/29732575/how-to-specify-line-breaks-in-a-multi-line-flexbox-layout) — frederj, Nov 27 '19 at 22:12

score 0 · Accepted Answer · edited Feb 17 '21 at 22:29

0

Add the following in your media query:

.header-title {
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 750px; 
}

& .header-title h1,
.header-title h2 {
    width: 100%;
}

edited Feb 17 '21 at 22:29

Asbjørn Ulsberg

8,721
3
45
61

answered Jul 21 '18 at 04:28

pk_tan777

351
1
3

Add text-align: center to header-title – vishugosain Jul 21 '18 at 07:01
added the following css to .header-title - works! margin: 0 auto; max-width: 750px; – 1xxooxx Jul 21 '18 at 08:02

break line in a flex layout responsive

1 Answers1