CODEWITHSUNDEEP
htmlcss
MidnightDisco
MidnightDisco

Reputation: 11

Want DIVs stacked on desktop but next to each other on mobile

Im trying to keep an image with a description underneath it on desktop and then for mobile want the image to the left and description to the right... more for keeping everything above the fold as much as possible.

I want on desktop the DIVs to be:

A A A

B B B

But on mobile:

A B

A B

A B

I have them in parents to try and keep them together within there but doesn't seem to be working.

<style>
.pathOption_row {
	display: inline-block;
	position: relative;
	width: 100%;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;
}


.pathOption_block {
	display: inline-block;
	position: relative;
	width: 30%;
	height: 300px;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;
}



.pathOption_img {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media only screen and (max-width: 768px) {
.pathOption_block{
	width:70%;
	position: relative;
	text-align: center;
}

.pathOption_image {
	float: left;
	display: inline-block;
	position: absolute;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;

.pathOption_text {
	float: right;



}


.pathOption_img {
	display: inline-block;
	float: left;
	position: relative;
	width: 50%;
	height: 100%;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

</style>
<div class="pathOption_row">
	<div class="pathOption_block">
		<div class="pathOption_image">
			<a class="pathOption_link" href="X">
				<img class="pathOption_img" src="http://tug.ctan.org/macros/latex/contrib/mwe/example-image-a.png" alt="" />
			</a><!--/.po_link-->
		</div><!--/.pathOption_image-->
		<div class="pathOption_text">
			B
		</div><!--/.pathOption_text-->
	</div><!--/.pathOption_block-->
	
	<div class="pathOption_block">
		<div class="pathOption_image">
			<a class="pathOption_link" href="X">
				<img class="pathOption_img" src="http://tug.ctan.org/macros/latex/contrib/mwe/example-image-a.png" alt="" />
			</a><!--/.po_link-->
		</div><!--/.pathOption_image-->
		<div class="pathOption_text">
			B
		</div><!--/.pathOption_text-->
	</div><!--/.pathOption_block-->

	<div class="pathOption_block">
		<div class="pathOption_image">
			<a class="pathOption_link" href="X">
				<img class="pathOption_img" src="http://tug.ctan.org/macros/latex/contrib/mwe/example-image-a.png" alt="" />
			</a><!--/.po_link-->
		</div><!--/.pathOption_image-->
		<div class="pathOption_text">
			B
		</div><!--/.pathOption_text-->
	</div><!--/.pathOption_block-->

</div><!--/.pathOption_row-->

Upvotes: 1

Views: 647

Answers (1)

Sebastijan Dumančić
Sebastijan Dumančić

Reputation: 1182

Here's a working fiddle: https://jsfiddle.net/zsvfLy7q/5/

Basically you want to wrap the As and Bs vertically and then stack them inline on mobile. 

.wrapper {
  display: flex;
  flex-direction: column;
} 

@media (min-width:800px) {
  .wrapper {
    flex-direction: row;  
  }  
}

@media (max-width:800px) {
  .block {
    display: flex;
  }  
}

I was using flexbox since it's preferred way nowadays, but the same can be achieved with floats, the idea is the same.

Upvotes: 1

Related Questions