How to make flex responsive like this?

HTML-CSS
1

d
d706×547 63.3 KB

2

What have you tried? Where is your code?

The layout is pretty much the default layout for flexbox.

  • Create a parent container (flex container) for each section.

  • Put two child containers inside the parent section.

  • Inside the child containers, put the content (image and text).

  • Use the HTML source order to switch the content (img > text, text > image), or look into using the order property.

As an aside: I wouldn’t suggest the order property if it can be avoided. It’s better to keep the source order the same as the page order whenever possible.

5

(post deleted by author)

6

Why not responsive in phons!!

HTML Code

		<div class="container text-center features-container">
				<div class="feature-items">
						<div class="authentication-container">
								<div class="item item-right">
										<img class="authentication" src="https://desktop.github.com/images/upgrade/pr-checks.png" alt="Authentication">
								</div>
								<div class="item item-left">
										<h4 class="authentication-title">Attribute commits with collaborators easily</h4>
										<p class="authentication-sub">Quickly add co-authors to your commit. Great for pairing and excellent for sending a little love/credit to that special someone who helped fix that gnarly bug of yours. See the attribution on the history page, undo an accidental attribution, and see the co-authors on github.com</p>
								</div>
						</div>
				</div>
		</div>

CSS Code

.features-container, .authentication-container {
	margin-left: auto;
	margin-right: auto;
	text-align: center !important;
}

.features-container {
	max-width: 900px;
}

.authentication-container {
	align-items: center !important;
	display: flex !important;
	color: rgba(255,255,255,0.65);
}

.authentication {
	max-width: 314px;
	border-style: none;
	text-align: right !important;
}

.authentication-title {
	margin-top: 0;
	margin-bottom: 0;
	color: white !important;
	text-align: left !important;
}

.authentication-sub {
	text-align: left !important;
}

@media (min-width: 768px) {
	.item {
		width: 33.3333333333%;
		text-align: right !important;
		padding: 32px !important;
		flex: 1 1 auto !important;
		border: 1px solid rebeccapurple;
	}
}
7

Flexbox doesn’t “automagically” make it responsive.

If you want the elements to stack you can switch the flex-direction to column in the media query, or you can use flex-wrap: wrap; on the flexbox container.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.