Beiträge von jackyjoy123

jackyjoy123

I wanted to center a heading in the header. Is that also possible with justify-content: center; ?

Strangely, that's ignored.

Code

header {
background-image: url (images / background.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.85;
position: relative;
}

.header_title {
position: absolute;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
transform: translateX (-50%) translateY (-50%);
font-family: 'Covered By Your Grace', cursive;
line-height: 1.65em;
font-size: 3.125rem;
color: #ffffff;
text-align: center;
}

Alles anzeigen

Code

header {
background-image: url (images / background.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.85;
display: flex;
}

.header_title {
justify-content: center;
align-items: center;
font-family: 'Covered By Your Grace', cursive;
line-height: 1.65em;
font-size: 3.125rem;
color: #ffffff;
text-align: center;
}

Alles anzeigen

In addition, I would like to represent several horizontally aligned boxes.

A maximum of three in a row, so that the rest automatically wraps to the next line. The only problem is that flex: 1; or other width specifications are ignored. Instead, all boxes are placed in a row regardless of flex-wrap: wrap. I found a workaround with a break that works so far. Is that correct or is there another solution? Why are the width specifications ignored?

Code

<div id = "footer_wrapper">
<main class = "main2">
<div class = "rowbox"> </div>
<div class = "rowbox"> </div>
<div class = "rowbox"> </div>
<div class = "break"> </div> <! - break ->
<div class = "rowbox"> </div>
<div class = "rowbox"> </div>
<div class = "rowbox"> </div>
<div class = "break"> </div> <! - break ->
<div class = "rowbox"> </div>
<div class = "rowbox"> </div>
<div class = "rowbox"> </div>
</main>
</div>

#footer_wrapper {
min-height: 100vh;
}


.main {
max-width: 950px;
margin: 0 auto;
flex: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}


.news_box {
margin-top: 50px;
padding: 10px;
background-color: #ffffff;
border: 1px solid # f0f0f0;
border-radius: 2px;
}

.news_box_title {
margin: 10px;
text-align: center;
}
.news_box_content {
text-align: center;
}

.button_1 {
display: block;
margin: 10px;
padding: 10px;
border: 1px solid # f0f0f0;
border-radius: 2px;
letter-spacing: 4px;
text-align: center;
text-decoration: none;
}

.button_1: hover {
background-color: #fafafa;
}


.rowbox {
flex: 1;
margin-top: 50px;
margin-left: 10px;
margin-right: 10px;
background-color: #ffffff;
border: 1px solid # f0f0f0;
padding: 15px;
border-radius: 3px;
}

.break {
flex base: 100%;
height: 0;
}

Alles anzeigen

thanks my issue has been fixed.