Untitled
unknown
plain_text
2 years ago
1.5 kB
6
Indexable
.product-details-page-container {
display: flex;
flex-direction: row;
align-items: flex-start;
margin-left: 30px;
margin-top: 20px; /* Added margin-top to give some space */
}
.product-details-card {
display: flex;
flex-direction: column;
border: 2px solid #6aa151;
border-radius: 8px;
padding: 20px;
margin-left: 20px; /* Added margin-left to give some space between image and details */
box-shadow: 0 0 10px #e604041a;
}
.fetched-image {
width: 350px;
height: auto; /* Changed height to auto to maintain aspect ratio */
border-radius: 8px;
object-fit: contain;
}
.product-details {
flex: 1; /* Added flex: 1 to expand and fill remaining space */
padding-left: 20px; /* Added padding-left to separate details from image */
text-align: left; /* Changed text alignment to left */
}
.addtocart {
background-color: grey;
width: 180px;
height: 40px;
font-weight: bolder;
border-radius: 20px;
cursor: pointer; /* Added cursor pointer to indicate it's clickable */
}
@media (max-width: 768px) {
.product-details-page-container {
flex-direction: column; /* Change to column layout on smaller screens */
}
.product-details-card {
margin-left: 0; /* Reset margin on smaller screens */
margin-top: 20px; /* Added margin-top to give some space */
}
.product-details {
padding-left: 0; /* Reset padding on smaller screens */
text-align: center; /* Align text to center on smaller screens */
}
}
Editor is loading...
Leave a Comment