html - Horizontal Boxes that Stack on Mobile - Centered with Image, Title Text and Detail Text -
having trouble conceptualizing how go making set of boxes. need horizontal , centered, stack on smaller screen size. need center image , 2 types of text. appreciate thoughts!
what have far: need start main container , hold 4 boxes inside of it. not sure how horizontal display or stacking feature on smaller screens. unsure how center content inside of each box - not sure if should use static or dynamic formatting inside boxes.
i'd recommend using flex , media queries if don't want go down bootstrap (or other grid layout) route.
html:
<div class="wrapper"> <div class="box"> <div class="image">image</div> <h1>title text</h1> <div>detailed text explains title means</div> </div> <div class="box"> <div class="image">image</div> <h1>title text</h1> <div>detailed text explains title means</div> </div> <div class="box"> <div class="image">image</div> <h1>title text</h1> <div>detailed text explains title means</div> </div> <div class="box"> <div class="image">image</div> <h1>title text</h1> <div>detailed text explains title means</div> </div> </div>
css:
.wrapper { display: flex; flex-direction: column; } .box { width: 100%; padding: 10px; text-align: center; border: 1px solid black; } .image { display: inline-block; background: black; color: white; padding: 10px; } @media (min-width: 600px) { .wrapper { flex-direction: row; } .box { width: auto; flex-grow: 1; } }
Comments
Post a Comment