Tehreem Zafar
Reputation: 9
Responsive Div Boxes
I have these div boxes on my page and they work perfectly on desktop but appear misaligned on mobile. I want to make these boxes such that these boxes stack on top of each other. I have something like this on the desktop right now which is perfectly fine:
Desktop
But I want these divs to stack on top of each other on mobile devices but they appear somewhat like this:
Mobile
Please can someone help me with this? Here is the HTML code for the boxes:
.category-img{
width:54px;
height:64px;
}
.main{
display: table;
width: 100%;
}
.row{
display: table-row;
}
.fourdiv{
display: table-cell;
width: 25%;
}
.blocks-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
padding: 0;
width:90%;
vertical-align: middle;
margin-left:60px !important;
}
.icon {
vertical-align: middle;
}
.title{
text-align: center;
font-size: 42px;
color:#929097;
font-family: 'Russo One', sans-serif;
font-weight: 400;
text-transform:uppercase;
}
/**
.title:before{
content: "";
display: block;
width: 380px;
height:1px;
background-color: #7b7a80;
position: absolute;
left:70px;
top:93%;
}
.title:after{
content: "";
display: block;
width: 380px;
height:1px;
background-color: #7b7a80;
position: absolute;
right:70px;
top:93%;
}**/
.title2{
text-align: center;
font-size: 42px;
color:#929097;
font-family: 'Russo One', sans-serif;
font-weight: 400;
text-transform:uppercase;
}
.category-title{
font-family: 'Varela Round', sans-serif;
font-weight:600;
}
.category-block:hover{
background-color:#ff721f;
color:#fff;
}
@media (min-width: 768px) {
.blocks-list {
margin: 0 -15px;
}
}
.blocks-item {
box-sizing: border-box;
color:#7c7981;
display: flex;
flex: 1 0 340px;
margin: 0 0 30px;
max-width: 100%;
text-align: center;
background-color: #f1f0f5;
}
@media (min-width: 768px) {
.blocks-item {
margin: 0 15px 30px;
}
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
text-decoration: none;
}
.blocks-item-internal {
background-color: transparent;
border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock::before {
content: "\1F512";
font-size: 15px;
bottom: 5px;
position: relative;
}
.blocks-item-internal a {
color:#7c7981;
}
.blocks-item-link {
color:#7c7981;
padding: 10px 20px;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
text-decoration: none;
height:90px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
font-family: 'Varela Round', sans-serif;
}
.blocks-item-link:hover, .blocks-item-link:active {
text-decoration: none;
background-color:#ff721f;
color:#010101;
box-shadow: 0 0 11px rgba(33,33,33,.2);
}
.blocks-item-link:focus {
outline: 0;
box-shadow: 0 0 0 3px white;
text-decoration: none;
}
.blocks-item-title {
margin-bottom: 0;
font-size: 11px;
line-height: 18px;
text-align: justify; /* For Edge */
-moz-text-align-last: justify; /* For Firefox prior 58.0 */
text-align-last: justify;
font-family: 'Varela Round', sans-serif;
}
.blocks-item-description {
font-weight: 300;
margin: 0;
}
.blocks-item-description:not(:empty) {
margin-top: 10px;
}<!--Products Start--->
<div class="main">
<div class="row">
<section class="section knowledge-base">
<h2 class="title">Our Products</h2>
<section class="categories blocks">
<ul class="blocks-list">
<div class="fourdiv">
<li class="blocks-item">
<a href="https://www.mirasafety.com/collections/frontpage" target="_blank" class="blocks-item-link">
<span class="flag-icon">
<svg version="1.1" id="Layer_1" class="icon flag-icon1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
<g fill="currentColor">
<polygon points="37,21.6 30.2,28.5 26.8,25 24.9,26.9 30.4,32.4 39.2,23.8" />
<path d="M32,13c-7.7,0-14,6.3-14,14c0,7.7,6.3,14,14,14s14-6.3,14-14C46,19.3,39.8,13,32,13z M32,38.5 c-6.3,0-11.5-5.1-11.5-11.5c0-6.3,5.1-11.5,11.5-11.5c6.3,0,11.5,5.1,11.5,11.5C43.5,33.3,38.4,38.5,32,38.5z" />
</g>
</svg>
<span class="blocks-item-title">All Products</span>
</span>
</a>
</li>
</div>
<div class="fourdiv">
<li class="blocks-item">
<a href="https://www.mirasafety.com/collections/frontpage" target="_blank" class="blocks-item-link">
<span class="flag-icon">
<svg version="1.1" id="Layer_1" class="icon flag-icon2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
<rect x="0.1" y="0.1" display="none" fill="#FFFFFF" width="63.9" height="54"></rect>
<g>
<g>
<path fill="#010101" d="M51,26.8h-1.9V13.2c0-2.1-1.7-4.2-3.8-4.6l-8.2-1.5c-2.4-0.4-6.4-0.5-8.8-0.1l-9.6,1.6
c-2.1,0.4-3.8,2.4-3.8,4.5v13.6h-1.9V13.2c0-1.5,0.6-2.9,1.6-4.1c1-1.2,2.4-2,3.8-2.2L28,5.2c2.6-0.4,6.9-0.4,9.5,0.1l8.2,1.5
C47.1,7,48.4,7.8,49.5,9c1,1.2,1.6,2.7,1.6,4.1V26.8L51,26.8z"></path>
</g>
<g>
<path fill="#010101" d="M47.4,21.3h-1.9V16c0-2.1-1.7-4.2-3.8-4.6L37,10.6c-2.4-0.4-6.4-0.5-8.8-0.1l-5.8,1
c-2.1,0.4-3.8,2.4-3.8,4.5v5.3h-1.9V16c0-1.5,0.6-2.9,1.6-4.1c1-1.2,2.4-2,3.8-2.2l5.8-1c2.6-0.4,6.9-0.4,9.5,0.1l4.7,0.9
c1.4,0.3,2.8,1.1,3.8,2.3c1,1.2,1.6,2.7,1.6,4.1V21.3z"></path>
</g>
<g>
<path fill="#010101" d="M37.8,46.2L36.3,45l10.1-11.6l0,0c1.5-1.6,2.7-4.8,2.7-6.9V13.2H51v13.3c0,1.3-0.3,2.8-0.9,4.4
c-0.6,1.5-1.4,2.9-2.3,3.8L37.8,46.2z"></path>
</g>
<g>
<path fill="#010101" d="M43.3,27.7H20.7c-2.3,0-4.1-1.8-4.1-4.1v-3.3h1.9v3.3c0,1.2,1,2.2,2.2,2.2h22.6c1.2,0,2.2-1,2.2-2.2v-3.3
h1.9v3.3C47.4,25.9,45.6,27.7,43.3,27.7z"></path>
</g>
<g>
<path fill="#010101" d="M32,43.1c-0.9,0-1.8-0.2-2.7-0.6c-0.9-0.4-1.6-1-2.3-1.8l-3.7-4.4c-1.9-2.2-1.5-3.8-1.2-4.6
c0.4-0.8,1.4-2,4.3-2h11.2c2.9,0,3.9,1.3,4.3,2c0.4,0.8,0.7,2.4-1.2,4.6L37,40.7c-0.7,0.8-1.4,1.4-2.3,1.8
C33.9,42.9,33,43.1,32,43.1z M26.5,31.5c-1.3,0-2.3,0.4-2.6,0.9C23.6,33,23.9,34,24.8,35l3.7,4.4c0.9,1.1,2.2,1.8,3.5,1.8
c1.3,0,2.6-0.6,3.5-1.8l3.7-4.4c0.9-1,1.2-2,0.9-2.6c-0.3-0.6-1.2-0.9-2.6-0.9H26.5z"></path>
</g>
<g>
<path fill="#010101" d="M33.8,52.5H32v-1.9h1.8c0.4,0,0.8-0.4,0.9-0.8l0.2-1.5c0.1-1.1,0.7-2.6,1.5-3.4l2.2-2.5l1.4,1.2l-2.2,2.5
c-0.5,0.5-0.9,1.6-1,2.3L36.6,50c-0.1,0.7-0.4,1.3-0.9,1.8C35.2,52.2,34.5,52.5,33.8,52.5z"></path>
</g>
<g>
<path fill="#010101" d="M26.3,46.2L16.3,34.6c-0.9-0.9-1.7-2.3-2.3-3.8c-0.6-1.5-0.9-3.1-0.9-4.4V13.2h1.9v13.3
c0,2.2,1.2,5.3,2.7,6.9l0,0L27.7,45L26.3,46.2z"></path>
</g>
<g>
<path fill="#010101" d="M32,52.5h-1.8c-0.7,0-1.3-0.3-1.8-0.7c-0.5-0.5-0.8-1.1-0.9-1.8l-0.2-1.5c-0.1-0.7-0.6-1.8-1-2.3l-2.2-2.5
l1.4-1.2l2.2,2.5c0.7,0.8,1.4,2.3,1.5,3.4l0.1,1.5c0,0.4,0.4,0.8,0.9,0.8H32V52.5L32,52.5z"></path>
</g>
<g>
<path fill="#010101" d="M41.8,26.8h-1.9c0-4.3-3.5-7.8-7.8-7.8c-4.3,0-7.8,3.5-7.8,7.8h-1.9c0-1.3,0.3-2.6,0.8-3.8
c0.5-1.2,1.2-2.2,2.1-3.1c0.9-0.9,1.9-1.6,3.1-2.1c1.2-0.5,2.5-0.8,3.8-0.8c1.3,0,2.6,0.3,3.8,0.8c1.2,0.5,2.2,1.2,3.1,2.1
c0.9,0.9,1.6,1.9,2.1,3.1C41.5,24.2,41.8,25.4,41.8,26.8z"></path>
</g>
<g>
<path fill="#010101" d="M35.5,6.2h-1.9v-2c0-0.4-0.3-0.7-0.7-0.7h-1.8c-0.4,0-0.7,0.3-0.7,0.7v2h-1.9v-2c0-1.4,1.2-2.6,2.6-2.6
h1.8c1.4,0,2.6,1.2,2.6,2.6V6.2z"></path>
</g>
<g>
<g>
<rect x="22.9" y="32.4" fill="#010101" width="18.3" height="1.9"></rect>
</g>
<g>
<rect x="24.8" y="35.6" fill="#010101" width="14.4" height="1.9"></rect>
</g>
<g>
<rect x="27.4" y="38.7" fill="#010101" width="9.2" height="1.9"></rect>
</g>
</g>
<g>
<rect x="31.1" y="30.6" fill="#010101" width="1.9" height="11.8"></rect>
</g>
<g>
<polygon fill="#010101" points="43.5,42.8 40.5,40.2 45.1,34.8 48.2,37.4 46.9,38.9 45.3,37.5 43.2,40 44.8,41.4 "></polygon>
</g>
<g>
<path fill="#010101" d="M47.3,50.2L47.3,50.2c-0.6,0-1.2-0.2-1.7-0.6l-3.3-2.8c-1.1-0.9-1.2-2.6-0.3-3.6l6.1-7.1
c0.5-0.6,1.2-0.9,2-0.9c0.6,0,1.2,0.2,1.7,0.6l3.3,2.8c0.5,0.4,0.8,1.1,0.9,1.8c0,0.7-0.2,1.4-0.6,1.9l-6.1,7.1
C48.8,49.8,48.1,50.2,47.3,50.2z M50.2,36.9c-0.2,0-0.4,0.1-0.5,0.2l-6.1,7.1c-0.3,0.3-0.2,0.7,0.1,1l3.3,2.8
c0.2,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l6.1-7.1c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.4-0.2-0.5l-3.3-2.8
C50.5,37,50.3,36.9,50.2,36.9z"></path>
</g>
<g>
<polygon fill="#010101" points="20.5,42.8 19.3,41.4 20.9,40 18.7,37.5 17.1,38.9 15.9,37.4 18.9,34.8 23.5,40.2 "></polygon>
</g>
<g>
<path fill="#010101" d="M16.7,50.2c-0.8,0-1.5-0.3-2-0.9l-6.1-7.1C8.2,41.7,8,41,8,40.3c0.1-0.7,0.4-1.3,0.9-1.8l3.3-2.8
c0.5-0.4,1.1-0.6,1.7-0.6c0.8,0,1.5,0.3,2,0.9L22,43c0.9,1.1,0.8,2.7-0.3,3.6l-3.3,2.8C17.9,49.9,17.3,50.2,16.7,50.2z M13.9,36.9
c-0.1,0-0.3,0-0.5,0.2L10.1,40c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.2,0,0.4,0.2,0.5l6.1,7.1c0.1,0.2,0.3,0.2,0.5,0.2
c0.1,0,0.3,0,0.5-0.2l3.3-2.8c0.3-0.3,0.3-0.7,0.1-1l-6.1-7.1C14.3,37,14.1,36.9,13.9,36.9z"></path>
</g>
</g>
</svg>
<span class="blocks-item-title">CBRN Gas Masks</span>
</span>
</a>
</li>
</div>
<div class="fourdiv">
<li class="blocks-item">
<a href="https://www.mirasafety.com/collections/frontpage" target="_blank" class="blocks-item-link">
<span class="flag-icon">
<svg version="1.1" id="Layer_1" class="icon flag-icon3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
<rect x="0.1" y="0.1" display="none" fill="#FFFFFF" width="63.9" height="54"></rect>
<g>
<g>
<path fill="#010101" d="M34.7,4.1H33V2.6c0-0.2-0.2-0.4-0.4-0.4h-1.3c-0.2,0-0.4,0.2-0.4,0.4v1.5h-1.6V2.6c0-1.1,0.9-2,2-2h1.3
c1.1,0,2,0.9,2,2V4.1z"></path>
</g>
<g>
<path fill="#010101" d="M17.9,12.7l-1.4-0.9c1.6-2.6,3.9-4.7,6.5-6.2c1.3-0.8,2.8-1.3,4.3-1.7c1.5-0.4,3.1-0.6,4.7-0.6
c1.6,0,3.2,0.2,4.7,0.6c1.5,0.4,2.9,1,4.2,1.7c2.6,1.5,4.9,3.6,6.5,6.1L46,12.6C43,7.8,37.7,4.9,32,4.9C26.2,4.9,21,7.8,17.9,12.7
z"></path>
</g>
<g>
<path fill="#010101" d="M23.5,40.7c-1.3-1.2-3.2-3.2-5-5.7c-1.9-2.6-3.2-5.2-4-7.7l1.6-0.5c1.9,5.8,6.6,10.9,8.6,12.8L23.5,40.7z"></path>
</g>
<g>
<path fill="#010101" d="M40.5,40.7l-1.1-1.2c2.4-2.3,6.7-7.1,8.5-12.8l1.6,0.5c-0.8,2.6-2.2,5.3-4,7.9
C43.7,37.6,41.8,39.5,40.5,40.7z"></path>
</g>
<g>
<path fill="#010101" d="M32,53.5c-1.3,0-2.5-0.3-3.7-0.8c-1.1-0.5-2.2-1.2-3-2.1c-0.9-0.9-1.6-1.9-2.1-3c-0.5-1.2-0.8-2.4-0.8-3.7
c0-1.3,0.3-2.5,0.8-3.7c0.5-1.1,1.2-2.2,2.1-3c0.9-0.9,1.9-1.6,3-2.1c1.2-0.5,2.4-0.8,3.7-0.8s2.5,0.3,3.7,0.8
c1.1,0.5,2.2,1.2,3,2.1c0.9,0.9,1.6,1.9,2.1,3c0.5,1.2,0.8,2.4,0.8,3.7c0,1.3-0.3,2.5-0.8,3.7c-0.5,1.1-1.2,2.2-2.1,3
c-0.9,0.9-1.9,1.6-3,2.1C34.6,53.3,33.3,53.5,32,53.5z M32,36c-4.4,0-7.9,3.6-7.9,7.9s3.6,7.9,7.9,7.9c4.4,0,7.9-3.6,7.9-7.9
S36.4,36,32,36z"></path>
</g>
<g>
<path fill="#010101" d="M32,50.6c-1.8,0-3.4-0.7-4.7-1.9c-1.3-1.3-1.9-2.9-1.9-4.7c0-1.8,0.7-3.4,1.9-4.7s2.9-1.9,4.7-1.9
c1.8,0,3.4,0.7,4.7,1.9s1.9,2.9,1.9,4.7c0,1.8-0.7,3.4-1.9,4.7C35.5,49.9,33.8,50.6,32,50.6z M32,38.9c-2.8,0-5,2.2-5,5
c0,2.8,2.2,5,5,5s5-2.2,5-5C37,41.2,34.8,38.9,32,38.9z"></path>
</g>
<g>
<path fill="#010101" d="M41.4,27.9c-1,0-2-0.2-2.9-0.6c-0.9-0.4-1.7-0.9-2.4-1.6c-0.7-0.7-1.2-1.5-1.6-2.4
c-0.4-0.9-0.6-1.9-0.6-2.9s0.2-2,0.6-2.9c0.4-0.9,0.9-1.7,1.6-2.4c0.7-0.7,1.5-1.2,2.4-1.6c0.9-0.4,1.9-0.6,2.9-0.6s2,0.2,2.9,0.6
c0.9,0.4,1.7,0.9,2.4,1.6c0.7,0.7,1.2,1.5,1.6,2.4c0.4,0.9,0.6,1.9,0.6,2.9s-0.2,2-0.6,2.9c-0.4,0.9-0.9,1.7-1.6,2.4
c-0.7,0.7-1.5,1.2-2.4,1.6C43.4,27.7,42.4,27.9,41.4,27.9z M41.4,14.5c-3.2,0-5.9,2.6-5.9,5.9c0,3.2,2.6,5.9,5.9,5.9
s5.9-2.6,5.9-5.9C47.3,17.1,44.7,14.5,41.4,14.5z"></path>
</g>
<g>
<path fill="#010101" d="M38.4,26.6c-0.4,0-0.8,0-1.2-0.1l0.3-1.6c0.3,0,0.6,0.1,0.9,0.1c3.2,0,5.9-2.6,5.9-5.9c0-2-1-3.8-2.6-4.9
l0.9-1.4c2.1,1.4,3.3,3.7,3.3,6.2c0,1-0.2,2-0.6,2.9c-0.4,0.9-0.9,1.7-1.6,2.4c-0.7,0.7-1.5,1.2-2.4,1.6
C40.4,26.4,39.4,26.6,38.4,26.6z"></path>
</g>
<g>
<path fill="#010101" d="M41.4,31c-1.1,0-2.2-0.2-3.3-0.5c-0.4-0.1-0.7-0.6-0.5-1c0.1-0.4,0.6-0.7,1-0.5c0.9,0.3,1.8,0.4,2.8,0.4
c2.5,0,4.9-1.1,6.6-2.9c1.5-1.7,2.3-3.8,2.3-6c0-4.9-4-9-9-9c-0.5,0-0.8-0.4-0.8-0.8c0-0.5,0.4-0.8,0.8-0.8c1.4,0,2.8,0.3,4.1,0.8
c1.3,0.5,2.4,1.3,3.4,2.3c1,1,1.7,2.1,2.3,3.4c0.6,1.3,0.8,2.7,0.8,4.1c0,2.6-1,5.2-2.8,7.1c-1,1.1-2.2,1.9-3.5,2.5
C44.4,30.7,42.9,31,41.4,31z"></path>
</g>
<g>
<path fill="#010101" d="M22.6,27.9c-1,0-2-0.2-2.9-0.6c-0.9-0.4-1.7-0.9-2.4-1.6c-0.7-0.7-1.2-1.5-1.6-2.4
c-0.4-0.9-0.6-1.9-0.6-2.9s0.2-2,0.6-2.9c0.4-0.9,0.9-1.7,1.6-2.4c0.7-0.7,1.5-1.2,2.4-1.6c0.9-0.4,1.9-0.6,2.9-0.6
c1,0,2,0.2,2.9,0.6c0.9,0.4,1.7,0.9,2.4,1.6c0.7,0.7,1.2,1.5,1.6,2.4c0.4,0.9,0.6,1.9,0.6,2.9s-0.2,2-0.6,2.9
c-0.4,0.9-0.9,1.7-1.6,2.4s-1.5,1.2-2.4,1.6C24.6,27.7,23.6,27.9,22.6,27.9z M22.6,14.5c-3.2,0-5.9,2.6-5.9,5.9
c0,3.2,2.6,5.9,5.9,5.9c3.2,0,5.9-2.6,5.9-5.9C28.5,17.1,25.8,14.5,22.6,14.5z"></path>
</g>
<g>
<path fill="#010101" d="M25.4,26.6c-1,0-2-0.2-2.9-0.6c-0.9-0.4-1.7-0.9-2.4-1.6c-0.7-0.7-1.2-1.5-1.6-2.4
c-0.4-0.9-0.6-1.9-0.6-2.9c0-1.2,0.3-2.3,0.8-3.4c0.5-1,1.2-1.9,2.1-2.6l1,1.3c-1.4,1.1-2.3,2.8-2.3,4.6c0,3.2,2.6,5.9,5.9,5.9
c0.4,0,0.8,0,1.2-0.1l0.3,1.6C26.5,26.5,25.9,26.6,25.4,26.6z"></path>
</g>
<g>
<path fill="#010101" d="M22.6,31c-1.5,0-3-0.3-4.4-1c-1.3-0.6-2.5-1.5-3.5-2.6C12.9,25.5,12,23,12,20.4c0-3.5,1.7-6.8,4.7-8.8
c1.8-1.2,3.8-1.8,5.9-1.8c0.5,0,0.8,0.4,0.8,0.8c0,0.5-0.4,0.8-0.8,0.8c-1.8,0-3.5,0.5-5,1.5c-2.5,1.7-4,4.5-4,7.4
c0,2.2,0.8,4.3,2.3,6c1.7,1.9,4.1,3,6.7,3c1.1,0,2.2-0.2,3.2-0.6c0.4-0.2,0.9,0,1.1,0.5c0.2,0.4,0,0.9-0.5,1.1
C25.2,30.7,23.9,31,22.6,31z"></path>
</g>
<g>
<circle fill="#010101" cx="33.6" cy="42.5" r="1.1"></circle>
</g>
<g>
<circle fill="#010101" cx="30.4" cy="42.5" r="1.1"></circle>
</g>
<g>
<circle fill="#010101" cx="33.6" cy="45.6" r="1.1"></circle>
</g>
<g>
<circle fill="#010101" cx="30.4" cy="45.6" r="1.1"></circle>
</g>
</g>
</svg>
<span class="blocks-item-title">Children's Gas Masks</span>
</span>
</a>
</li>
</div>
</ul>
</section>
<!--Products End--->Upvotes: 0
Views: 61
Answers (4)
waqas Mumtaz
Reputation: 707
.category-img{
width:54px;
height:64px;
}
.main{
display: table;
width: 100%;
}
.row{
display: table-row;
}
.fourdiv{
display: table-cell;
width: 25%;
}
.blocks-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
padding: 0;
width:90%;
vertical-align: middle;
margin-left:60px !important;
}
.icon {
vertical-align: middle;
}
.title{
text-align: center;
font-size: 42px;
color:#929097;
font-family: 'Russo One', sans-serif;
font-weight: 400;
text-transform:uppercase;
}
/**
.title:before{
content: "";
display: block;
width: 380px;
height:1px;
background-color: #7b7a80;
position: absolute;
left:70px;
top:93%;
}
.title:after{
content: "";
display: block;
width: 380px;
height:1px;
background-color: #7b7a80;
position: absolute;
right:70px;
top:93%;
}**/
.title2{
text-align: center;
font-size: 42px;
color:#929097;
font-family: 'Russo One', sans-serif;
font-weight: 400;
text-transform:uppercase;
}
.category-title{
font-family: 'Varela Round', sans-serif;
font-weight:600;
}
.category-block:hover{
background-color:#ff721f;
color:#fff;
}
@media (min-width: 768px) {
.blocks-list {
margin: 0 -15px;
}
}
.blocks-item {
box-sizing: border-box;
color:#7c7981;
display: flex;
flex: 1 0 340px;
margin: 0 0 30px;
max-width: 100%;
text-align: center;
background-color: #f1f0f5;
}
@media (min-width: 768px) {
.blocks-item {
margin: 0 15px 30px;
}
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
text-decoration: none;
}
.blocks-item-internal {
background-color: transparent;
border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock::before {
content: "\1F512";
font-size: 15px;
bottom: 5px;
position: relative;
}
.blocks-item-internal a {
color:#7c7981;
}
.blocks-item-link {
color:#7c7981;
padding: 10px 20px;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
text-decoration: none;
height:90px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
font-family: 'Varela Round', sans-serif;
}
.blocks-item-link:hover, .blocks-item-link:active {
text-decoration: none;
background-color:#ff721f;
color:#010101;
box-shadow: 0 0 11px rgba(33,33,33,.2);
}
.blocks-item-link:focus {
outline: 0;
box-shadow: 0 0 0 3px white;
text-decoration: none;
}
.blocks-item-title {
margin-bottom: 0;
font-size: 11px;
line-height: 18px;
text-align: justify; /* For Edge */
-moz-text-align-last: justify; /* For Firefox prior 58.0 */
text-align-last: justify;
font-family: 'Varela Round', sans-serif;
}
.blocks-item-description {
font-weight: 300;
margin: 0;
}
.blocks-item-description:not(:empty) {
margin-top: 10px;
}
@media all and (max-width: 420px)
{
.blocks-list {
flex-direction:column
}
li.blocks-item{
margin:0
}
}<!--Products Start--->
<div class="main">
<div class="row">
<section class="section knowledge-base">
<h2 class="title">Our Products</h2>
<section class="categories blocks">
<ul class="blocks-list">
<div class="fourdiv">
<li class="blocks-item">
<a href="https://www.mirasafety.com/collections/frontpage" target="_blank" class="blocks-item-link">
<span class="flag-icon">
<svg version="1.1" id="Layer_1" class="icon flag-icon1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
<g fill="currentColor">
<polygon points="37,21.6 30.2,28.5 26.8,25 24.9,26.9 30.4,32.4 39.2,23.8" />
<path d="M32,13c-7.7,0-14,6.3-14,14c0,7.7,6.3,14,14,14s14-6.3,14-14C46,19.3,39.8,13,32,13z M32,38.5 c-6.3,0-11.5-5.1-11.5-11.5c0-6.3,5.1-11.5,11.5-11.5c6.3,0,11.5,5.1,11.5,11.5C43.5,33.3,38.4,38.5,32,38.5z" />
</g>
</svg>
<span class="blocks-item-title">All Products</span>
</span>
</a>
</li>
</div>
<div class="fourdiv">
<li class="blocks-item">
<a href="https://www.mirasafety.com/collections/frontpage" target="_blank" class="blocks-item-link">
<span class="flag-icon">
<svg version="1.1" id="Layer_1" class="icon flag-icon2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
<rect x="0.1" y="0.1" display="none" fill="#FFFFFF" width="63.9" height="54"></rect>
<g>
<g>
<path fill="#010101" d="M51,26.8h-1.9V13.2c0-2.1-1.7-4.2-3.8-4.6l-8.2-1.5c-2.4-0.4-6.4-0.5-8.8-0.1l-9.6,1.6
c-2.1,0.4-3.8,2.4-3.8,4.5v13.6h-1.9V13.2c0-1.5,0.6-2.9,1.6-4.1c1-1.2,2.4-2,3.8-2.2L28,5.2c2.6-0.4,6.9-0.4,9.5,0.1l8.2,1.5
C47.1,7,48.4,7.8,49.5,9c1,1.2,1.6,2.7,1.6,4.1V26.8L51,26.8z"></path>
</g>
<g>
<path fill="#010101" d="M47.4,21.3h-1.9V16c0-2.1-1.7-4.2-3.8-4.6L37,10.6c-2.4-0.4-6.4-0.5-8.8-0.1l-5.8,1
c-2.1,0.4-3.8,2.4-3.8,4.5v5.3h-1.9V16c0-1.5,0.6-2.9,1.6-4.1c1-1.2,2.4-2,3.8-2.2l5.8-1c2.6-0.4,6.9-0.4,9.5,0.1l4.7,0.9
c1.4,0.3,2.8,1.1,3.8,2.3c1,1.2,1.6,2.7,1.6,4.1V21.3z"></path>
</g>
<g>
<path fill="#010101" d="M37.8,46.2L36.3,45l10.1-11.6l0,0c1.5-1.6,2.7-4.8,2.7-6.9V13.2H51v13.3c0,1.3-0.3,2.8-0.9,4.4
c-0.6,1.5-1.4,2.9-2.3,3.8L37.8,46.2z"></path>
</g>
<g>
<path fill="#010101" d="M43.3,27.7H20.7c-2.3,0-4.1-1.8-4.1-4.1v-3.3h1.9v3.3c0,1.2,1,2.2,2.2,2.2h22.6c1.2,0,2.2-1,2.2-2.2v-3.3
h1.9v3.3C47.4,25.9,45.6,27.7,43.3,27.7z"></path>
</g>
<g>
<path fill="#010101" d="M32,43.1c-0.9,0-1.8-0.2-2.7-0.6c-0.9-0.4-1.6-1-2.3-1.8l-3.7-4.4c-1.9-2.2-1.5-3.8-1.2-4.6
c0.4-0.8,1.4-2,4.3-2h11.2c2.9,0,3.9,1.3,4.3,2c0.4,0.8,0.7,2.4-1.2,4.6L37,40.7c-0.7,0.8-1.4,1.4-2.3,1.8
C33.9,42.9,33,43.1,32,43.1z M26.5,31.5c-1.3,0-2.3,0.4-2.6,0.9C23.6,33,23.9,34,24.8,35l3.7,4.4c0.9,1.1,2.2,1.8,3.5,1.8
c1.3,0,2.6-0.6,3.5-1.8l3.7-4.4c0.9-1,1.2-2,0.9-2.6c-0.3-0.6-1.2-0.9-2.6-0.9H26.5z"></path>
</g>
<g>
<path fill="#010101" d="M33.8,52.5H32v-1.9h1.8c0.4,0,0.8-0.4,0.9-0.8l0.2-1.5c0.1-1.1,0.7-2.6,1.5-3.4l2.2-2.5l1.4,1.2l-2.2,2.5
c-0.5,0.5-0.9,1.6-1,2.3L36.6,50c-0.1,0.7-0.4,1.3-0.9,1.8C35.2,52.2,34.5,52.5,33.8,52.5z"></path>
</g>
<g>
<path fill="#010101" d="M26.3,46.2L16.3,34.6c-0.9-0.9-1.7-2.3-2.3-3.8c-0.6-1.5-0.9-3.1-0.9-4.4V13.2h1.9v13.3
c0,2.2,1.2,5.3,2.7,6.9l0,0L27.7,45L26.3,46.2z"></path>
</g>
<g>
<path fill="#010101" d="M32,52.5h-1.8c-0.7,0-1.3-0.3-1.8-0.7c-0.5-0.5-0.8-1.1-0.9-1.8l-0.2-1.5c-0.1-0.7-0.6-1.8-1-2.3l-2.2-2.5
l1.4-1.2l2.2,2.5c0.7,0.8,1.4,2.3,1.5,3.4l0.1,1.5c0,0.4,0.4,0.8,0.9,0.8H32V52.5L32,52.5z"></path>
</g>
<g>
<path fill="#010101" d="M41.8,26.8h-1.9c0-4.3-3.5-7.8-7.8-7.8c-4.3,0-7.8,3.5-7.8,7.8h-1.9c0-1.3,0.3-2.6,0.8-3.8
c0.5-1.2,1.2-2.2,2.1-3.1c0.9-0.9,1.9-1.6,3.1-2.1c1.2-0.5,2.5-0.8,3.8-0.8c1.3,0,2.6,0.3,3.8,0.8c1.2,0.5,2.2,1.2,3.1,2.1
c0.9,0.9,1.6,1.9,2.1,3.1C41.5,24.2,41.8,25.4,41.8,26.8z"></path>
</g>
<g>
<path fill="#010101" d="M35.5,6.2h-1.9v-2c0-0.4-0.3-0.7-0.7-0.7h-1.8c-0.4,0-0.7,0.3-0.7,0.7v2h-1.9v-2c0-1.4,1.2-2.6,2.6-2.6
h1.8c1.4,0,2.6,1.2,2.6,2.6V6.2z"></path>
</g>
<g>
<g>
<rect x="22.9" y="32.4" fill="#010101" width="18.3" height="1.9"></rect>
</g>
<g>
<rect x="24.8" y="35.6" fill="#010101" width="14.4" height="1.9"></rect>
</g>
<g>
<rect x="27.4" y="38.7" fill="#010101" width="9.2" height="1.9"></rect>
</g>
</g>
<g>
<rect x="31.1" y="30.6" fill="#010101" width="1.9" height="11.8"></rect>
</g>
<g>
<polygon fill="#010101" points="43.5,42.8 40.5,40.2 45.1,34.8 48.2,37.4 46.9,38.9 45.3,37.5 43.2,40 44.8,41.4 "></polygon>
</g>
<g>
<path fill="#010101" d="M47.3,50.2L47.3,50.2c-0.6,0-1.2-0.2-1.7-0.6l-3.3-2.8c-1.1-0.9-1.2-2.6-0.3-3.6l6.1-7.1
c0.5-0.6,1.2-0.9,2-0.9c0.6,0,1.2,0.2,1.7,0.6l3.3,2.8c0.5,0.4,0.8,1.1,0.9,1.8c0,0.7-0.2,1.4-0.6,1.9l-6.1,7.1
C48.8,49.8,48.1,50.2,47.3,50.2z M50.2,36.9c-0.2,0-0.4,0.1-0.5,0.2l-6.1,7.1c-0.3,0.3-0.2,0.7,0.1,1l3.3,2.8
c0.2,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l6.1-7.1c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.4-0.2-0.5l-3.3-2.8
C50.5,37,50.3,36.9,50.2,36.9z"></path>
</g>
<g>
<polygon fill="#010101" points="20.5,42.8 19.3,41.4 20.9,40 18.7,37.5 17.1,38.9 15.9,37.4 18.9,34.8 23.5,40.2 "></polygon>
</g>
<g>
<path fill="#010101" d="M16.7,50.2c-0.8,0-1.5-0.3-2-0.9l-6.1-7.1C8.2,41.7,8,41,8,40.3c0.1-0.7,0.4-1.3,0.9-1.8l3.3-2.8
c0.5-0.4,1.1-0.6,1.7-0.6c0.8,0,1.5,0.3,2,0.9L22,43c0.9,1.1,0.8,2.7-0.3,3.6l-3.3,2.8C17.9,49.9,17.3,50.2,16.7,50.2z M13.9,36.9
c-0.1,0-0.3,0-0.5,0.2L10.1,40c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.2,0,0.4,0.2,0.5l6.1,7.1c0.1,0.2,0.3,0.2,0.5,0.2
c0.1,0,0.3,0,0.5-0.2l3.3-2.8c0.3-0.3,0.3-0.7,0.1-1l-6.1-7.1C14.3,37,14.1,36.9,13.9,36.9z"></path>
</g>
</g>
</svg>
<span class="blocks-item-title">CBRN Gas Masks</span>
</span>
</a>
</li>
</div>
<div class="fourdiv">
<li class="blocks-item">
<a href="https://www.mirasafety.com/collections/frontpage" target="_blank" class="blocks-item-link">
<span class="flag-icon">
<svg version="1.1" id="Layer_1" class="icon flag-icon3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
<rect x="0.1" y="0.1" display="none" fill="#FFFFFF" width="63.9" height="54"></rect>
<g>
<g>
<path fill="#010101" d="M34.7,4.1H33V2.6c0-0.2-0.2-0.4-0.4-0.4h-1.3c-0.2,0-0.4,0.2-0.4,0.4v1.5h-1.6V2.6c0-1.1,0.9-2,2-2h1.3
c1.1,0,2,0.9,2,2V4.1z"></path>
</g>
<g>
<path fill="#010101" d="M17.9,12.7l-1.4-0.9c1.6-2.6,3.9-4.7,6.5-6.2c1.3-0.8,2.8-1.3,4.3-1.7c1.5-0.4,3.1-0.6,4.7-0.6
c1.6,0,3.2,0.2,4.7,0.6c1.5,0.4,2.9,1,4.2,1.7c2.6,1.5,4.9,3.6,6.5,6.1L46,12.6C43,7.8,37.7,4.9,32,4.9C26.2,4.9,21,7.8,17.9,12.7
z"></path>
</g>
<g>
<path fill="#010101" d="M23.5,40.7c-1.3-1.2-3.2-3.2-5-5.7c-1.9-2.6-3.2-5.2-4-7.7l1.6-0.5c1.9,5.8,6.6,10.9,8.6,12.8L23.5,40.7z"></path>
</g>
<g>
<path fill="#010101" d="M40.5,40.7l-1.1-1.2c2.4-2.3,6.7-7.1,8.5-12.8l1.6,0.5c-0.8,2.6-2.2,5.3-4,7.9
C43.7,37.6,41.8,39.5,40.5,40.7z"></path>
</g>
<g>
<path fill="#010101" d="M32,53.5c-1.3,0-2.5-0.3-3.7-0.8c-1.1-0.5-2.2-1.2-3-2.1c-0.9-0.9-1.6-1.9-2.1-3c-0.5-1.2-0.8-2.4-0.8-3.7
c0-1.3,0.3-2.5,0.8-3.7c0.5-1.1,1.2-2.2,2.1-3c0.9-0.9,1.9-1.6,3-2.1c1.2-0.5,2.4-0.8,3.7-0.8s2.5,0.3,3.7,0.8
c1.1,0.5,2.2,1.2,3,2.1c0.9,0.9,1.6,1.9,2.1,3c0.5,1.2,0.8,2.4,0.8,3.7c0,1.3-0.3,2.5-0.8,3.7c-0.5,1.1-1.2,2.2-2.1,3
c-0.9,0.9-1.9,1.6-3,2.1C34.6,53.3,33.3,53.5,32,53.5z M32,36c-4.4,0-7.9,3.6-7.9,7.9s3.6,7.9,7.9,7.9c4.4,0,7.9-3.6,7.9-7.9
S36.4,36,32,36z"></path>
</g>
<g>
<path fill="#010101" d="M32,50.6c-1.8,0-3.4-0.7-4.7-1.9c-1.3-1.3-1.9-2.9-1.9-4.7c0-1.8,0.7-3.4,1.9-4.7s2.9-1.9,4.7-1.9
c1.8,0,3.4,0.7,4.7,1.9s1.9,2.9,1.9,4.7c0,1.8-0.7,3.4-1.9,4.7C35.5,49.9,33.8,50.6,32,50.6z M32,38.9c-2.8,0-5,2.2-5,5
c0,2.8,2.2,5,5,5s5-2.2,5-5C37,41.2,34.8,38.9,32,38.9z"></path>
</g>
<g>
<path fill="#010101" d="M41.4,27.9c-1,0-2-0.2-2.9-0.6c-0.9-0.4-1.7-0.9-2.4-1.6c-0.7-0.7-1.2-1.5-1.6-2.4
c-0.4-0.9-0.6-1.9-0.6-2.9s0.2-2,0.6-2.9c0.4-0.9,0.9-1.7,1.6-2.4c0.7-0.7,1.5-1.2,2.4-1.6c0.9-0.4,1.9-0.6,2.9-0.6s2,0.2,2.9,0.6
c0.9,0.4,1.7,0.9,2.4,1.6c0.7,0.7,1.2,1.5,1.6,2.4c0.4,0.9,0.6,1.9,0.6,2.9s-0.2,2-0.6,2.9c-0.4,0.9-0.9,1.7-1.6,2.4
c-0.7,0.7-1.5,1.2-2.4,1.6C43.4,27.7,42.4,27.9,41.4,27.9z M41.4,14.5c-3.2,0-5.9,2.6-5.9,5.9c0,3.2,2.6,5.9,5.9,5.9
s5.9-2.6,5.9-5.9C47.3,17.1,44.7,14.5,41.4,14.5z"></path>
</g>
<g>
<path fill="#010101" d="M38.4,26.6c-0.4,0-0.8,0-1.2-0.1l0.3-1.6c0.3,0,0.6,0.1,0.9,0.1c3.2,0,5.9-2.6,5.9-5.9c0-2-1-3.8-2.6-4.9
l0.9-1.4c2.1,1.4,3.3,3.7,3.3,6.2c0,1-0.2,2-0.6,2.9c-0.4,0.9-0.9,1.7-1.6,2.4c-0.7,0.7-1.5,1.2-2.4,1.6
C40.4,26.4,39.4,26.6,38.4,26.6z"></path>
</g>
<g>
<path fill="#010101" d="M41.4,31c-1.1,0-2.2-0.2-3.3-0.5c-0.4-0.1-0.7-0.6-0.5-1c0.1-0.4,0.6-0.7,1-0.5c0.9,0.3,1.8,0.4,2.8,0.4
c2.5,0,4.9-1.1,6.6-2.9c1.5-1.7,2.3-3.8,2.3-6c0-4.9-4-9-9-9c-0.5,0-0.8-0.4-0.8-0.8c0-0.5,0.4-0.8,0.8-0.8c1.4,0,2.8,0.3,4.1,0.8
c1.3,0.5,2.4,1.3,3.4,2.3c1,1,1.7,2.1,2.3,3.4c0.6,1.3,0.8,2.7,0.8,4.1c0,2.6-1,5.2-2.8,7.1c-1,1.1-2.2,1.9-3.5,2.5
C44.4,30.7,42.9,31,41.4,31z"></path>
</g>
<g>
<path fill="#010101" d="M22.6,27.9c-1,0-2-0.2-2.9-0.6c-0.9-0.4-1.7-0.9-2.4-1.6c-0.7-0.7-1.2-1.5-1.6-2.4
c-0.4-0.9-0.6-1.9-0.6-2.9s0.2-2,0.6-2.9c0.4-0.9,0.9-1.7,1.6-2.4c0.7-0.7,1.5-1.2,2.4-1.6c0.9-0.4,1.9-0.6,2.9-0.6
c1,0,2,0.2,2.9,0.6c0.9,0.4,1.7,0.9,2.4,1.6c0.7,0.7,1.2,1.5,1.6,2.4c0.4,0.9,0.6,1.9,0.6,2.9s-0.2,2-0.6,2.9
c-0.4,0.9-0.9,1.7-1.6,2.4s-1.5,1.2-2.4,1.6C24.6,27.7,23.6,27.9,22.6,27.9z M22.6,14.5c-3.2,0-5.9,2.6-5.9,5.9
c0,3.2,2.6,5.9,5.9,5.9c3.2,0,5.9-2.6,5.9-5.9C28.5,17.1,25.8,14.5,22.6,14.5z"></path>
</g>
<g>
<path fill="#010101" d="M25.4,26.6c-1,0-2-0.2-2.9-0.6c-0.9-0.4-1.7-0.9-2.4-1.6c-0.7-0.7-1.2-1.5-1.6-2.4
c-0.4-0.9-0.6-1.9-0.6-2.9c0-1.2,0.3-2.3,0.8-3.4c0.5-1,1.2-1.9,2.1-2.6l1,1.3c-1.4,1.1-2.3,2.8-2.3,4.6c0,3.2,2.6,5.9,5.9,5.9
c0.4,0,0.8,0,1.2-0.1l0.3,1.6C26.5,26.5,25.9,26.6,25.4,26.6z"></path>
</g>
<g>
<path fill="#010101" d="M22.6,31c-1.5,0-3-0.3-4.4-1c-1.3-0.6-2.5-1.5-3.5-2.6C12.9,25.5,12,23,12,20.4c0-3.5,1.7-6.8,4.7-8.8
c1.8-1.2,3.8-1.8,5.9-1.8c0.5,0,0.8,0.4,0.8,0.8c0,0.5-0.4,0.8-0.8,0.8c-1.8,0-3.5,0.5-5,1.5c-2.5,1.7-4,4.5-4,7.4
c0,2.2,0.8,4.3,2.3,6c1.7,1.9,4.1,3,6.7,3c1.1,0,2.2-0.2,3.2-0.6c0.4-0.2,0.9,0,1.1,0.5c0.2,0.4,0,0.9-0.5,1.1
C25.2,30.7,23.9,31,22.6,31z"></path>
</g>
<g>
<circle fill="#010101" cx="33.6" cy="42.5" r="1.1"></circle>
</g>
<g>
<circle fill="#010101" cx="30.4" cy="42.5" r="1.1"></circle>
</g>
<g>
<circle fill="#010101" cx="33.6" cy="45.6" r="1.1"></circle>
</g>
<g>
<circle fill="#010101" cx="30.4" cy="45.6" r="1.1"></circle>
</g>
</g>
</svg>
<span class="blocks-item-title">Children's Gas Masks</span>
</span>
</a>
</li>
</div>
</ul>
</section>
<!--Products End--->Upvotes: 0
Yudiz Solutions
Reputation: 4459
Can you please check with these code. hope it will resolve your issue.
.category-img{
width:54px;
height:64px;
}
.main{
display: table;
width: 100%;
}
.row{
display: table-row;
}
.fourdiv{
width: 25%;
flex-shrink: 0;
-webkit-flex-shrink: 0;
}
.blocks-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
padding: 0;
width:90%;
vertical-align: middle;
margin: 0 auto;
}
.icon {
vertical-align: middle;
}
.title{
text-align: center;
font-size: 42px;
color:#929097;
font-family: 'Russo One', sans-serif;
font-weight: 400;
text-transform:uppercase;
}
/**
.title:before{
content: "";
display: block;
width: 380px;
height:1px;
background-color: #7b7a80;
position: absolute;
left:70px;
top:93%;
}
.title:after{
content: "";
display: block;
width: 380px;
height:1px;
background-color: #7b7a80;
position: absolute;
right:70px;
top:93%;
}**/
.title2{
text-align: center;
font-size: 42px;
color:#929097;
font-family: 'Russo One', sans-serif;
font-weight: 400;
text-transform:uppercase;
}
.category-title{
font-family: 'Varela Round', sans-serif;
font-weight:600;
}
.category-block:hover{
background-color:#ff721f;
color:#fff;
}
@media (max-width: 768px) {
.fourdiv{
width: 50%;
}
}
@media (max-width: 480px) {
.fourdiv{
width: 100%;
}
}
@media (min-width: 768px) {
.blocks-list {
margin: 0 auto;
}
}
.blocks-item {
box-sizing: border-box;
color:#7c7981;
display: flex;
flex: 1 0 340px;
margin: 0 15px 30px;
max-width: 100%;
text-align: center;
background-color: #f1f0f5;
}
@media (min-width: 768px) {
.blocks-item {
margin: 0 15px 30px;
}
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
text-decoration: none;
}
.blocks-item-internal {
background-color: transparent;
border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock::before {
content: "\1F512";
font-size: 15px;
bottom: 5px;
position: relative;
}
.blocks-item-internal a {
color:#7c7981;
}
.blocks-item-link {
color:#7c7981;
padding: 10px 20px;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
text-decoration: none;
height:90px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
font-family: 'Varela Round', sans-serif;
}
.blocks-item-link:hover, .blocks-item-link:active {
text-decoration: none;
background-color:#ff721f;
color:#010101;
box-shadow: 0 0 11px rgba(33,33,33,.2);
}
.blocks-item-link:focus {
outline: 0;
box-shadow: 0 0 0 3px white;
text-decoration: none;
}
.blocks-item-title {
margin-bottom: 0;
font-size: 11px;
line-height: 18px;
text-align: justify; /* For Edge */
-moz-text-align-last: justify; /* For Firefox prior 58.0 */
text-align-last: justify;
font-family: 'Varela Round', sans-serif;
}
.blocks-item-description {
font-weight: 300;
margin: 0;
}
.blocks-item-description:not(:empty) {
margin-top: 10px;
}<!--Products Start--->
<div class="main">
<div class="row">
<section class="section knowledge-base">
<h2 class="title">Our Products</h2>
<section class="categories blocks">
<ul class="blocks-list">
<div class="fourdiv">
<li class="blocks-item">
<a href="https://www.mirasafety.com/collections/frontpage" target="_blank" class="blocks-item-link">
<span class="flag-icon">
<svg version="1.1" id="Layer_1" class="icon flag-icon1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
<g fill="currentColor">
<polygon points="37,21.6 30.2,28.5 26.8,25 24.9,26.9 30.4,32.4 39.2,23.8" />
<path d="M32,13c-7.7,0-14,6.3-14,14c0,7.7,6.3,14,14,14s14-6.3,14-14C46,19.3,39.8,13,32,13z M32,38.5 c-6.3,0-11.5-5.1-11.5-11.5c0-6.3,5.1-11.5,11.5-11.5c6.3,0,11.5,5.1,11.5,11.5C43.5,33.3,38.4,38.5,32,38.5z" />
</g>
</svg>
<span class="blocks-item-title">All Products</span>
</span>
</a>
</li>
</div>
<div class="fourdiv">
<li class="blocks-item">
<a href="https://www.mirasafety.com/collections/frontpage" target="_blank" class="blocks-item-link">
<span class="flag-icon">
<svg version="1.1" id="Layer_1" class="icon flag-icon2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
<rect x="0.1" y="0.1" display="none" fill="#FFFFFF" width="63.9" height="54"></rect>
<g>
<g>
<path fill="#010101" d="M51,26.8h-1.9V13.2c0-2.1-1.7-4.2-3.8-4.6l-8.2-1.5c-2.4-0.4-6.4-0.5-8.8-0.1l-9.6,1.6
c-2.1,0.4-3.8,2.4-3.8,4.5v13.6h-1.9V13.2c0-1.5,0.6-2.9,1.6-4.1c1-1.2,2.4-2,3.8-2.2L28,5.2c2.6-0.4,6.9-0.4,9.5,0.1l8.2,1.5
C47.1,7,48.4,7.8,49.5,9c1,1.2,1.6,2.7,1.6,4.1V26.8L51,26.8z"></path>
</g>
<g>
<path fill="#010101" d="M47.4,21.3h-1.9V16c0-2.1-1.7-4.2-3.8-4.6L37,10.6c-2.4-0.4-6.4-0.5-8.8-0.1l-5.8,1
c-2.1,0.4-3.8,2.4-3.8,4.5v5.3h-1.9V16c0-1.5,0.6-2.9,1.6-4.1c1-1.2,2.4-2,3.8-2.2l5.8-1c2.6-0.4,6.9-0.4,9.5,0.1l4.7,0.9
c1.4,0.3,2.8,1.1,3.8,2.3c1,1.2,1.6,2.7,1.6,4.1V21.3z"></path>
</g>
<g>
<path fill="#010101" d="M37.8,46.2L36.3,45l10.1-11.6l0,0c1.5-1.6,2.7-4.8,2.7-6.9V13.2H51v13.3c0,1.3-0.3,2.8-0.9,4.4
c-0.6,1.5-1.4,2.9-2.3,3.8L37.8,46.2z"></path>
</g>
<g>
<path fill="#010101" d="M43.3,27.7H20.7c-2.3,0-4.1-1.8-4.1-4.1v-3.3h1.9v3.3c0,1.2,1,2.2,2.2,2.2h22.6c1.2,0,2.2-1,2.2-2.2v-3.3
h1.9v3.3C47.4,25.9,45.6,27.7,43.3,27.7z"></path>
</g>
<g>
<path fill="#010101" d="M32,43.1c-0.9,0-1.8-0.2-2.7-0.6c-0.9-0.4-1.6-1-2.3-1.8l-3.7-4.4c-1.9-2.2-1.5-3.8-1.2-4.6
c0.4-0.8,1.4-2,4.3-2h11.2c2.9,0,3.9,1.3,4.3,2c0.4,0.8,0.7,2.4-1.2,4.6L37,40.7c-0.7,0.8-1.4,1.4-2.3,1.8
C33.9,42.9,33,43.1,32,43.1z M26.5,31.5c-1.3,0-2.3,0.4-2.6,0.9C23.6,33,23.9,34,24.8,35l3.7,4.4c0.9,1.1,2.2,1.8,3.5,1.8
c1.3,0,2.6-0.6,3.5-1.8l3.7-4.4c0.9-1,1.2-2,0.9-2.6c-0.3-0.6-1.2-0.9-2.6-0.9H26.5z"></path>
</g>
<g>
<path fill="#010101" d="M33.8,52.5H32v-1.9h1.8c0.4,0,0.8-0.4,0.9-0.8l0.2-1.5c0.1-1.1,0.7-2.6,1.5-3.4l2.2-2.5l1.4,1.2l-2.2,2.5
c-0.5,0.5-0.9,1.6-1,2.3L36.6,50c-0.1,0.7-0.4,1.3-0.9,1.8C35.2,52.2,34.5,52.5,33.8,52.5z"></path>
</g>
<g>
<path fill="#010101" d="M26.3,46.2L16.3,34.6c-0.9-0.9-1.7-2.3-2.3-3.8c-0.6-1.5-0.9-3.1-0.9-4.4V13.2h1.9v13.3
c0,2.2,1.2,5.3,2.7,6.9l0,0L27.7,45L26.3,46.2z"></path>
</g>
<g>
<path fill="#010101" d="M32,52.5h-1.8c-0.7,0-1.3-0.3-1.8-0.7c-0.5-0.5-0.8-1.1-0.9-1.8l-0.2-1.5c-0.1-0.7-0.6-1.8-1-2.3l-2.2-2.5
l1.4-1.2l2.2,2.5c0.7,0.8,1.4,2.3,1.5,3.4l0.1,1.5c0,0.4,0.4,0.8,0.9,0.8H32V52.5L32,52.5z"></path>
</g>
<g>
<path fill="#010101" d="M41.8,26.8h-1.9c0-4.3-3.5-7.8-7.8-7.8c-4.3,0-7.8,3.5-7.8,7.8h-1.9c0-1.3,0.3-2.6,0.8-3.8
c0.5-1.2,1.2-2.2,2.1-3.1c0.9-0.9,1.9-1.6,3.1-2.1c1.2-0.5,2.5-0.8,3.8-0.8c1.3,0,2.6,0.3,3.8,0.8c1.2,0.5,2.2,1.2,3.1,2.1
c0.9,0.9,1.6,1.9,2.1,3.1C41.5,24.2,41.8,25.4,41.8,26.8z"></path>
</g>
<g>
<path fill="#010101" d="M35.5,6.2h-1.9v-2c0-0.4-0.3-0.7-0.7-0.7h-1.8c-0.4,0-0.7,0.3-0.7,0.7v2h-1.9v-2c0-1.4,1.2-2.6,2.6-2.6
h1.8c1.4,0,2.6,1.2,2.6,2.6V6.2z"></path>
</g>
<g>
<g>
<rect x="22.9" y="32.4" fill="#010101" width="18.3" height="1.9"></rect>
</g>
<g>
<rect x="24.8" y="35.6" fill="#010101" width="14.4" height="1.9"></rect>
</g>
<g>
<rect x="27.4" y="38.7" fill="#010101" width="9.2" height="1.9"></rect>
</g>
</g>
<g>
<rect x="31.1" y="30.6" fill="#010101" width="1.9" height="11.8"></rect>
</g>
<g>
<polygon fill="#010101" points="43.5,42.8 40.5,40.2 45.1,34.8 48.2,37.4 46.9,38.9 45.3,37.5 43.2,40 44.8,41.4 "></polygon>
</g>
<g>
<path fill="#010101" d="M47.3,50.2L47.3,50.2c-0.6,0-1.2-0.2-1.7-0.6l-3.3-2.8c-1.1-0.9-1.2-2.6-0.3-3.6l6.1-7.1
c0.5-0.6,1.2-0.9,2-0.9c0.6,0,1.2,0.2,1.7,0.6l3.3,2.8c0.5,0.4,0.8,1.1,0.9,1.8c0,0.7-0.2,1.4-0.6,1.9l-6.1,7.1
C48.8,49.8,48.1,50.2,47.3,50.2z M50.2,36.9c-0.2,0-0.4,0.1-0.5,0.2l-6.1,7.1c-0.3,0.3-0.2,0.7,0.1,1l3.3,2.8
c0.2,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l6.1-7.1c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.4-0.2-0.5l-3.3-2.8
C50.5,37,50.3,36.9,50.2,36.9z"></path>
</g>
<g>
<polygon fill="#010101" points="20.5,42.8 19.3,41.4 20.9,40 18.7,37.5 17.1,38.9 15.9,37.4 18.9,34.8 23.5,40.2 "></polygon>
</g>
<g>
<path fill="#010101" d="M16.7,50.2c-0.8,0-1.5-0.3-2-0.9l-6.1-7.1C8.2,41.7,8,41,8,40.3c0.1-0.7,0.4-1.3,0.9-1.8l3.3-2.8
c0.5-0.4,1.1-0.6,1.7-0.6c0.8,0,1.5,0.3,2,0.9L22,43c0.9,1.1,0.8,2.7-0.3,3.6l-3.3,2.8C17.9,49.9,17.3,50.2,16.7,50.2z M13.9,36.9
c-0.1,0-0.3,0-0.5,0.2L10.1,40c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.2,0,0.4,0.2,0.5l6.1,7.1c0.1,0.2,0.3,0.2,0.5,0.2
c0.1,0,0.3,0,0.5-0.2l3.3-2.8c0.3-0.3,0.3-0.7,0.1-1l-6.1-7.1C14.3,37,14.1,36.9,13.9,36.9z"></path>
</g>
</g>
</svg>
<span class="blocks-item-title">CBRN Gas Masks</span>
</span>
</a>
</li>
</div>
<div class="fourdiv">
<li class="blocks-item">
<a href="https://www.mirasafety.com/collections/frontpage" target="_blank" class="blocks-item-link">
<span class="flag-icon">
<svg version="1.1" id="Layer_1" class="icon flag-icon3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
<rect x="0.1" y="0.1" display="none" fill="#FFFFFF" width="63.9" height="54"></rect>
<g>
<g>
<path fill="#010101" d="M34.7,4.1H33V2.6c0-0.2-0.2-0.4-0.4-0.4h-1.3c-0.2,0-0.4,0.2-0.4,0.4v1.5h-1.6V2.6c0-1.1,0.9-2,2-2h1.3
c1.1,0,2,0.9,2,2V4.1z"></path>
</g>
<g>
<path fill="#010101" d="M17.9,12.7l-1.4-0.9c1.6-2.6,3.9-4.7,6.5-6.2c1.3-0.8,2.8-1.3,4.3-1.7c1.5-0.4,3.1-0.6,4.7-0.6
c1.6,0,3.2,0.2,4.7,0.6c1.5,0.4,2.9,1,4.2,1.7c2.6,1.5,4.9,3.6,6.5,6.1L46,12.6C43,7.8,37.7,4.9,32,4.9C26.2,4.9,21,7.8,17.9,12.7
z"></path>
</g>
<g>
<path fill="#010101" d="M23.5,40.7c-1.3-1.2-3.2-3.2-5-5.7c-1.9-2.6-3.2-5.2-4-7.7l1.6-0.5c1.9,5.8,6.6,10.9,8.6,12.8L23.5,40.7z"></path>
</g>
<g>
<path fill="#010101" d="M40.5,40.7l-1.1-1.2c2.4-2.3,6.7-7.1,8.5-12.8l1.6,0.5c-0.8,2.6-2.2,5.3-4,7.9
C43.7,37.6,41.8,39.5,40.5,40.7z"></path>
</g>
<g>
<path fill="#010101" d="M32,53.5c-1.3,0-2.5-0.3-3.7-0.8c-1.1-0.5-2.2-1.2-3-2.1c-0.9-0.9-1.6-1.9-2.1-3c-0.5-1.2-0.8-2.4-0.8-3.7
c0-1.3,0.3-2.5,0.8-3.7c0.5-1.1,1.2-2.2,2.1-3c0.9-0.9,1.9-1.6,3-2.1c1.2-0.5,2.4-0.8,3.7-0.8s2.5,0.3,3.7,0.8
c1.1,0.5,2.2,1.2,3,2.1c0.9,0.9,1.6,1.9,2.1,3c0.5,1.2,0.8,2.4,0.8,3.7c0,1.3-0.3,2.5-0.8,3.7c-0.5,1.1-1.2,2.2-2.1,3
c-0.9,0.9-1.9,1.6-3,2.1C34.6,53.3,33.3,53.5,32,53.5z M32,36c-4.4,0-7.9,3.6-7.9,7.9s3.6,7.9,7.9,7.9c4.4,0,7.9-3.6,7.9-7.9
S36.4,36,32,36z"></path>
</g>
<g>
<path fill="#010101" d="M32,50.6c-1.8,0-3.4-0.7-4.7-1.9c-1.3-1.3-1.9-2.9-1.9-4.7c0-1.8,0.7-3.4,1.9-4.7s2.9-1.9,4.7-1.9
c1.8,0,3.4,0.7,4.7,1.9s1.9,2.9,1.9,4.7c0,1.8-0.7,3.4-1.9,4.7C35.5,49.9,33.8,50.6,32,50.6z M32,38.9c-2.8,0-5,2.2-5,5
c0,2.8,2.2,5,5,5s5-2.2,5-5C37,41.2,34.8,38.9,32,38.9z"></path>
</g>
<g>
<path fill="#010101" d="M41.4,27.9c-1,0-2-0.2-2.9-0.6c-0.9-0.4-1.7-0.9-2.4-1.6c-0.7-0.7-1.2-1.5-1.6-2.4
c-0.4-0.9-0.6-1.9-0.6-2.9s0.2-2,0.6-2.9c0.4-0.9,0.9-1.7,1.6-2.4c0.7-0.7,1.5-1.2,2.4-1.6c0.9-0.4,1.9-0.6,2.9-0.6s2,0.2,2.9,0.6
c0.9,0.4,1.7,0.9,2.4,1.6c0.7,0.7,1.2,1.5,1.6,2.4c0.4,0.9,0.6,1.9,0.6,2.9s-0.2,2-0.6,2.9c-0.4,0.9-0.9,1.7-1.6,2.4
c-0.7,0.7-1.5,1.2-2.4,1.6C43.4,27.7,42.4,27.9,41.4,27.9z M41.4,14.5c-3.2,0-5.9,2.6-5.9,5.9c0,3.2,2.6,5.9,5.9,5.9
s5.9-2.6,5.9-5.9C47.3,17.1,44.7,14.5,41.4,14.5z"></path>
</g>
<g>
<path fill="#010101" d="M38.4,26.6c-0.4,0-0.8,0-1.2-0.1l0.3-1.6c0.3,0,0.6,0.1,0.9,0.1c3.2,0,5.9-2.6,5.9-5.9c0-2-1-3.8-2.6-4.9
l0.9-1.4c2.1,1.4,3.3,3.7,3.3,6.2c0,1-0.2,2-0.6,2.9c-0.4,0.9-0.9,1.7-1.6,2.4c-0.7,0.7-1.5,1.2-2.4,1.6
C40.4,26.4,39.4,26.6,38.4,26.6z"></path>
</g>
<g>
<path fill="#010101" d="M41.4,31c-1.1,0-2.2-0.2-3.3-0.5c-0.4-0.1-0.7-0.6-0.5-1c0.1-0.4,0.6-0.7,1-0.5c0.9,0.3,1.8,0.4,2.8,0.4
c2.5,0,4.9-1.1,6.6-2.9c1.5-1.7,2.3-3.8,2.3-6c0-4.9-4-9-9-9c-0.5,0-0.8-0.4-0.8-0.8c0-0.5,0.4-0.8,0.8-0.8c1.4,0,2.8,0.3,4.1,0.8
c1.3,0.5,2.4,1.3,3.4,2.3c1,1,1.7,2.1,2.3,3.4c0.6,1.3,0.8,2.7,0.8,4.1c0,2.6-1,5.2-2.8,7.1c-1,1.1-2.2,1.9-3.5,2.5
C44.4,30.7,42.9,31,41.4,31z"></path>
</g>
<g>
<path fill="#010101" d="M22.6,27.9c-1,0-2-0.2-2.9-0.6c-0.9-0.4-1.7-0.9-2.4-1.6c-0.7-0.7-1.2-1.5-1.6-2.4
c-0.4-0.9-0.6-1.9-0.6-2.9s0.2-2,0.6-2.9c0.4-0.9,0.9-1.7,1.6-2.4c0.7-0.7,1.5-1.2,2.4-1.6c0.9-0.4,1.9-0.6,2.9-0.6
c1,0,2,0.2,2.9,0.6c0.9,0.4,1.7,0.9,2.4,1.6c0.7,0.7,1.2,1.5,1.6,2.4c0.4,0.9,0.6,1.9,0.6,2.9s-0.2,2-0.6,2.9
c-0.4,0.9-0.9,1.7-1.6,2.4s-1.5,1.2-2.4,1.6C24.6,27.7,23.6,27.9,22.6,27.9z M22.6,14.5c-3.2,0-5.9,2.6-5.9,5.9
c0,3.2,2.6,5.9,5.9,5.9c3.2,0,5.9-2.6,5.9-5.9C28.5,17.1,25.8,14.5,22.6,14.5z"></path>
</g>
<g>
<path fill="#010101" d="M25.4,26.6c-1,0-2-0.2-2.9-0.6c-0.9-0.4-1.7-0.9-2.4-1.6c-0.7-0.7-1.2-1.5-1.6-2.4
c-0.4-0.9-0.6-1.9-0.6-2.9c0-1.2,0.3-2.3,0.8-3.4c0.5-1,1.2-1.9,2.1-2.6l1,1.3c-1.4,1.1-2.3,2.8-2.3,4.6c0,3.2,2.6,5.9,5.9,5.9
c0.4,0,0.8,0,1.2-0.1l0.3,1.6C26.5,26.5,25.9,26.6,25.4,26.6z"></path>
</g>
<g>
<path fill="#010101" d="M22.6,31c-1.5,0-3-0.3-4.4-1c-1.3-0.6-2.5-1.5-3.5-2.6C12.9,25.5,12,23,12,20.4c0-3.5,1.7-6.8,4.7-8.8
c1.8-1.2,3.8-1.8,5.9-1.8c0.5,0,0.8,0.4,0.8,0.8c0,0.5-0.4,0.8-0.8,0.8c-1.8,0-3.5,0.5-5,1.5c-2.5,1.7-4,4.5-4,7.4
c0,2.2,0.8,4.3,2.3,6c1.7,1.9,4.1,3,6.7,3c1.1,0,2.2-0.2,3.2-0.6c0.4-0.2,0.9,0,1.1,0.5c0.2,0.4,0,0.9-0.5,1.1
C25.2,30.7,23.9,31,22.6,31z"></path>
</g>
<g>
<circle fill="#010101" cx="33.6" cy="42.5" r="1.1"></circle>
</g>
<g>
<circle fill="#010101" cx="30.4" cy="42.5" r="1.1"></circle>
</g>
<g>
<circle fill="#010101" cx="33.6" cy="45.6" r="1.1"></circle>
</g>
<g>
<circle fill="#010101" cx="30.4" cy="45.6" r="1.1"></circle>
</g>
</g>
</svg>
<span class="blocks-item-title">Children's Gas Masks</span>
</span>
</a>
</li>
</div>
</ul>
</section>
<!--Products End--->Upvotes: 1
Kawaljit Singh
Reputation: 188
Maybe you can try to add display: block; and text-align: center; for mobile devices.
.blocks-item-title {
margin-bottom: 0;
font-size: 11px;
line-height: 18px;
text-align: center;
display: block;
font-family: 'Varela Round', sans-serif;
}
Upvotes: 0
DohaHelmy
Reputation: 809
under a max-width of 320px or any other value you decide. use flex-direction: column on .block-list to change the direction from row. Example:
@media (max-width: 320px) {
.block-list {
flex-direction: column;
}
}
And it is best to keep all styles related to specific width screen under the same rule. no need to repeat @media above each selector changes.
Upvotes: 0
Related Questions
- Responsive design for divs
- Make divs properly responsive
- How to align div boxes responsive in html?
- how to wrap div elements boxes with responsive
- Responsive div with CSS
- Making DIVs responsive
- CSS responsive box
- multiple divs responsive with css
- Css div responsive design
- CSS divs for responsive screen sizes