I found a template that caught my eye here: w3schools template
My latest project involves using this template to create a basic online shop layout with three main vertical sections: left, middle, and right. The left panel serves as a preview area for the selected product image. Meanwhile, the middle section displays various product pictures where selecting one changes the preview in the left area. Eventually, the right segment will show a summary table of all chosen products.
The issue I'm facing currently is that on desktop devices, there's an undesired overlap between the left and middle areas (right area features haven't been implemented yet). I would like to resolve this overlapping problem without compromising layout integrity. Any advice on how I can achieve this effectively?
* {
box-sizing: border-box;
}
/* Styling for different screen sizes */
[class*="col-"] {
float: left;
padding: 15px;
width: 100%;
}
.productImage > *{
display :block;
}
.productImage{
float:left;
}
@media only screen and (min-width: 600px) { /* For tablets */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) { /* For desktops */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.tableImage{
height:250px;
width:250px;
padding: 5px;
}
.productImage:hover{
background-color:#ddd;
}
}
.row:after {
content: "";
display: table;
clear: both;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
.chosenProductDetailsImage{
height:550px;
width:400px;
padding: 10px;
background-color: white;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<script src="js/onlineshop.js"></script>
<title>On-line shop</title>
</head>
<body>
<div class="row">
<div id="leftDiv" class="col-3 col-s-3">
<img alt="" id="chosenProductDetailsImageId" class="chosenProductDetailsImage" src=""/>
</div>
<div class="col-7 col-s-9">
<div class ="productImage">
<img src="images/product1.jpg" alt= "Shirt" class="tableImage" onmouseout = "hideDetailImage();" onmouseover="showDetailImage(this)"/>
<input type="checkbox" id="NA823E08M-H11@6" onclick="setAddedToCart(this)" name="addToCart" value="Summer light skirt"/>
<span class="addToCartSpan">Add to Cart</span>
<span class="priceAb">from <span class="price">$19.99</span></span>
</div>
...
</div>
</body>
</html>