I have a marketplace type of page im working on but I can't seem to get the products(div elements) to be responsive. It looks terrible when resizing the window or looking at it on mobile. What am I doing wrong here?
<div class="productlayout">
<div class="products">
<div id="col-1">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title1">Official Mens T-Shirt</h3>
<h4 class="price1">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-2">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title2">Mens Tank</h3>
<h4 class="price2">$29.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-3">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title3">Mens Sweatpants</h3>
<h4 class="price3">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
</div>
</div>
CSS
.productlayout {
display: flex;
flex-direction: row;
height: 500px;
}
.products {
display: flex;
flex-grow: 1;
background-color: #c7c4c4;
margin: 0px 40px;
justify-content: space-around;
padding: 30px 0px;
}
#col-1 {
background: #1d1d1d;
width: 320px;
order: 1;
box-shadow: 0px 0px 1px 1px #000;
}
#col-1 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
#col-2 {
background: #1d1d1d;
width: 320px;
order: 2;
box-shadow: 0px 0px 1px 1px #000;
}
#col-2 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
#col-3 {
background: #1d1d1d;
width: 320px;
order: 3;
box-shadow: 0px 0px 1px 1px #000;
}
#col-3 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
.lineunderproduct {
width: 75%;
margin: 0 auto;
margin-top: 20px;
}
.title1 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.title2 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.title3 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.price1 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
.price2 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
.price3 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
/* Add to Cart Buttons */
.btn {
border: none;
font-family: 'Droid Serif', serif;
font-size: 20px;
color: #1d1d1d;
background: none;
cursor: pointer;
padding: 20px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
letter-spacing: none;
outline: none;
position: relative;
box-shadow: 0px 0px 0px 3px #D4AF37;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5 {
background: #fff;
color: #1d1d1d;
height: 40px;
min-width: 260px;
line-height: 30px;
font-size: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-5:active {
background: #9053a9;
top: 2px;
}
.btn-5 span {
display: inline-block;
letter-spacing: 0.1px;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.3s;
-moz-backface-visibility: hidden;
transition: all 0.3s;
backface-visibility: hidden;
}
.btn-5:before {
position: absolute;
height: 100%;
width: 100%;
line-height: 1.5;
font-size: 180%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5:active:before {
color: #703b87;
}
/* Button 5a */
.btn-5a:hover span {
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
transform: translateY(300%);
}
.btn-5a:before {
left: 0;
top: -100%;
}
.btn-5a:hover:before {
top: 0;
/* Hover backgorund change background-color: #308014; */
}
@media (max-width: 800px) {
.products {
flex-direction: column;
}
You need to add media queries for your design to be responsive and also always try to use % to provide width for responsive design
an example of media query for screen smaller that 768 px will be
@media only screen and (max-width: 768px) {
.products {
display:block;
}
#col-1 {width: 100%;}
#col-2 {width: 100%;}
#col-3 {width: 100%;}
}
Check the below example on expanded and small view to see the impact.
.productlayout { display: flex; flex-direction: row; height: 500px; } .products { display: flex; flex-grow: 1; background-color: #c7c4c4; margin: 0px 40px; justify-content: space-around; padding: 30px 0px; } #col-1 { background: #1d1d1d; width: 33%; order: 1; box-shadow: 0px 0px 1px 1px #000; } #col-2 { background: #1d1d1d; width: 33%; order: 2; box-shadow: 0px 0px 1px 1px #000; } #col-3 { background: #1d1d1d; width: 33%; order: 2; box-shadow: 0px 0px 1px 1px #000; } @media only screen and (max-width: 768px) { .products { display:block; } #col-1 {width: 100%;} #col-2 {width: 100%;} #col-3 {width: 100%;} } You need to write media queries for different view ports to make your design responsive. for smaller screen you can make add this css.
<div class="productlayout"> <div class="products"> <div id="col-1"> <img src="originallogo.png"> <hr class="lineunderproduct"> <h3 class="title1">Official Mens T-Shirt</h3> <h4 class="price1">$49.99</h4> <button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button> </div> <div id="col-2"> <img src="originallogo.png"> <hr class="lineunderproduct"> <h3 class="title2">Mens Tank</h3> <h4 class="price2">$29.99</h4> <button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button> </div> <div id="col-3"> <img src="originallogo.png"> <hr class="lineunderproduct"> <h3 class="title3">Mens Sweatpants</h3> <h4 class="price3">$49.99</h4> <button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.