2nd update
This commit is contained in:
“VeLiTi”
@@ -1341,64 +1341,298 @@ footer a:hover {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Extras Section Layout - 4 items per row on large screens - Version 1 with Centering */
|
||||
|
||||
.add_products {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 40px 0 0 0;
|
||||
background-color: var(--color-lighter-gray);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid var(--color-gray);
|
||||
border-radius: 8px;
|
||||
text-align: center; /* Center the content */
|
||||
}
|
||||
|
||||
.add_products h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--color-heading);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.add_products h2:after {
|
||||
content: "";
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background-color: var(--color-primary);
|
||||
margin: 10px auto 0;
|
||||
}
|
||||
|
||||
/* Create an inner container to center the floated items */
|
||||
.add_products {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.add_products::before {
|
||||
content: "";
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.add_product{
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
mix-blend-mode: multiply;
|
||||
width: min-content;
|
||||
.add_products::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.add_product a{
|
||||
/* Float layout for the product items */
|
||||
.add_product {
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack content vertically */
|
||||
align-items: center; /* Center content horizontally */
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--color-gray);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
background-color: var(--color-white);
|
||||
box-shadow: 0 2px 4px var(--color-shadow);
|
||||
text-align: center; /* Center text content */
|
||||
|
||||
/* Float layout for side-by-side positioning */
|
||||
float: left;
|
||||
width: calc(25% - 0.75rem); /* 4 items per row */
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/* Remove margin from every 4th item */
|
||||
.add_product:nth-child(4n+2) { /* Adjust for h2 being first child */
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Clear float after every 4th item */
|
||||
.add_product:nth-child(4n+2)::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.add_product:hover {
|
||||
background-color: var(--color-light-gray);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px var(--color-shadow);
|
||||
}
|
||||
|
||||
.add_product img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
margin-bottom: 0.5rem; /* Space below image */
|
||||
border-radius: 4px;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.add_product img:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.add_product form {
|
||||
margin: 0.5rem 0; /* Space above and below form */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.add_product input[type="submit"] {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-white);
|
||||
font-size: 1.2rem;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px var(--color-shadow);
|
||||
}
|
||||
|
||||
.add_product input[type="submit"]:hover {
|
||||
background-color: var(--color-primary-dark);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.add_product .product {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.add_name {
|
||||
font-weight: 500;
|
||||
color: var(--color-text-dark);
|
||||
display: block;
|
||||
color: #555555;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0.25rem;
|
||||
text-align: center; /* Center the product name */
|
||||
}
|
||||
|
||||
.add_price {
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
font-size: 1rem;
|
||||
display: block;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
text-align: center; /* Center the price */
|
||||
}
|
||||
|
||||
.add_rrp {
|
||||
color: #BBBBBB;
|
||||
text-decoration: line-through;
|
||||
font-size: 10px;
|
||||
/* Centering logic for different screen sizes */
|
||||
|
||||
/* Large screens (1200px+) - 4 items per row centered */
|
||||
@media (min-width: 1200px) {
|
||||
.add_products {
|
||||
/* Calculate centering: container width minus total items width, divided by 2 */
|
||||
padding-left: calc((100% - (4 * calc(25% - 0.75rem) + 3rem)) / 2 + 2rem);
|
||||
padding-right: calc((100% - (4 * calc(25% - 0.75rem) + 3rem)) / 2 + 2rem);
|
||||
}
|
||||
|
||||
.add_product {
|
||||
width: calc(25% - 0.75rem);
|
||||
}
|
||||
|
||||
.add_product:nth-child(5n+2) { /* h2 + 4 products */
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.add_product:nth-child(5n+2)::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.add_product input[type='submit']{
|
||||
border-radius: 90px;
|
||||
background-color: green;
|
||||
color: #fff;
|
||||
border: none;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
left: 20px;
|
||||
z-index: 999;
|
||||
/* Large screens (992px-1199px) - 4 items per row centered */
|
||||
@media (max-width: 1199px) and (min-width: 992px) {
|
||||
.add_products {
|
||||
padding-left: calc((100% - (4 * calc(25% - 0.75rem) + 3rem)) / 2 + 2rem);
|
||||
padding-right: calc((100% - (4 * calc(25% - 0.75rem) + 3rem)) / 2 + 2rem);
|
||||
}
|
||||
|
||||
.add_product {
|
||||
width: calc(25% - 0.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium screens (768px-991px) - 3 items per row centered */
|
||||
@media (max-width: 991px) and (min-width: 768px) {
|
||||
.add_products {
|
||||
padding-left: calc((100% - (3 * calc(33.33% - 0.67rem) + 2rem)) / 2 + 1.5rem);
|
||||
padding-right: calc((100% - (3 * calc(33.33% - 0.67rem) + 2rem)) / 2 + 1.5rem);
|
||||
}
|
||||
|
||||
.add_product {
|
||||
width: calc(33.33% - 0.67rem);
|
||||
}
|
||||
|
||||
.add_product:nth-child(4n+2) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.add_product:nth-child(4n+4) { /* h2 + 3 products */
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.add_product:nth-child(4n+2)::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.add_product:nth-child(4n+4)::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small screens (576px-767px) - 2 items per row centered */
|
||||
@media (max-width: 767px) and (min-width: 576px) {
|
||||
.add_products {
|
||||
padding-left: calc((100% - (2 * calc(50% - 0.5rem) + 1rem)) / 2 + 1.5rem);
|
||||
padding-right: calc((100% - (2 * calc(50% - 0.5rem) + 1rem)) / 2 + 1.5rem);
|
||||
}
|
||||
|
||||
.add_product {
|
||||
width: calc(50% - 0.5rem);
|
||||
}
|
||||
|
||||
.add_product:nth-child(4n+2),
|
||||
.add_product:nth-child(4n+4) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.add_product:nth-child(odd) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.add_product:nth-child(even) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.add_product:nth-child(4n+2)::after,
|
||||
.add_product:nth-child(4n+4)::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.add_product:nth-child(even)::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra small screens (575px and below) - 1 item per row centered */
|
||||
@media (max-width: 575px) {
|
||||
.add_product {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
flex-direction: column; /* Already set, but keeping for clarity */
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
max-width: 300px; /* Limit width on very small screens */
|
||||
}
|
||||
|
||||
.add_product:nth-child(n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.add_product:nth-child(n)::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.add_product img {
|
||||
margin-bottom: 0.5rem; /* Already set correctly */
|
||||
}
|
||||
|
||||
.add_product form {
|
||||
margin: 0.5rem 0; /* Already set correctly */
|
||||
}
|
||||
|
||||
.add_name {
|
||||
text-align: center;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.add_price {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.add_products {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
|
||||
Reference in New Issue
Block a user