Lately, I've been diving into coding to expand my knowledge of HTML and CSS. So far, I haven't delved into JavaScript just yet.
Currently, I've encountered a challenge. While trying to replicate a PSD file layout into HTML, I need to create a grey box with a subheading and paragraph positioned right in the middle below it. See the image below for reference.
https://i.sstatic.net/aRgyR.png
.boxes{
width: 500px;
background-color: #e6e6e6;
display: block;
height: 130px;
width: 230px;
color: white;
text-align: center;
padding: .10em;
margin: 2em;
border: double #fff 20px;
border-bottom: none;
}
.non-icons {
margin: 15%;
}
.box_text{
color: #8c8b8b;
} <div class="container">
<div class="four columns">
<div class="boxes">
<i class="fa fa-desktop fa-4x non-icons"></i>
</div>
<h4 class="box_text"> Web Design</h4>
</div>
<div class="four columns">
<div class="boxes">
<i class="fa fa-shopping-basket fa-4x non-icons"></i>
</div>
</div>
<div class="four columns">
<div class="boxes">
<i class="fa fa-signal fa-4x non-icons"></i>
</div>
</div>
</div> <!-- End of Container --> While everything appears okay in standard view, the layout breaks when the screen size is reduced.
Can someone offer assistance with this issue?
Thank you, Devansh