CODEWITHSUNDEEP
htmlcssflexbox
Ahdkwkw019283
Ahdkwkw019283

Reputation: 51

flex-flow: row wrap - displaying as column and not a row

For some reason flexbox is not dispalying my content in a row. The flex option is wrapping even in full screen mode before the screen becomes smaller. Not sure why it's doing this. I've attached a screenshots with the code so you can see what I mean. I was expecting the image to be on the right of the text. My text and image isn't being displayed in a row even though the browser is in full screen mode. The wrap seems to be kicking in

* {
	margin: 0;
	padding: 0;
	box-sizing: 0;
}

li,
a {
	font-size: 0.75rem;
	font-family: "Roboto";
	font-weight: 700;
	color: #303133;
	text-decoration: none;
}

.section2-h1 {
	font-size: 56px;
	font-family: "Roboto";
}

button {
	width: 176px;
	height: 47px;
	background: #6442ff;
	color: #ffffff;
	font-family: "Roboto";
	font-size: 12px;
	line-height: 18px;
	align-items: center;
	border: none;
}

.section2-head {
	margin: 160px;
	display: flex;
	flex-flow: row wrap;
}

.section2-text {
	max-width: 537px;
	margin-right: 74px;
}

.button {
	margin-top: 60px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> 
    <title>Document</title>
</head>
<body>
    <section id="section2">
        <header class="section2-head">
            <div class="section2-text">
                <h1 class="section2-h1"> Lorem ipsum dolor sit ame. 
                </h1>
                <p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
                <button class="button">READ MORE</button>
            </div>
            <img src="img/test1.jpg" alt="" class="section2-img">
        </header>
    </section>
    
</body>
</html>

Upvotes: 0

Views: 140

Answers (1)

Jon Bennett
Jon Bennett

Reputation: 441

Your image is too big for the row, flex is working properly and wrapping your image underneath the text because there is no more space. I know you say the image has been sized specifically for that area but with the margins you have on the parent and the text wrapper its being push underneath.

Upvotes: 1

Related Questions