downwards which results in white space above parent
*/
}
@media only screen and (min-width: 1600px)
{ /* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */
#gtm_logo, #product_cat_block, #navbar_top_inner, .page_description_content, #footer_inner, #Q_and_A_container, #grid_container_images_parent
{
/* .product_cat_block ... is in ... navbar_product_cat.css ... which is set to different width for ... product_detail_page.css */
width: 70%;
}
}
.grid-container {
position: relative;
/* width: 95%; */ /* 06-06-2024: grid container is now inside "grid_container_images_parent" as above */
margin: 0 auto;
display: grid;
/* grid-template-columns: auto; */ /* Make the grid smaller than the container */
grid-template-columns: 1fr 1fr;
justify-content: space-evenly; /* THIS! is most likely ineffective when using "fr" instead of "auto" */
/* see homepage ... where you're having to use "auto" to be able to use: "justify-content" */
grid-gap: 10px;
background-color: #d2e2ef;
padding: 10px;
padding-top: 3px;
}
/* Great article ... https://webplatform.github.io/docs/tutorials/understanding-css-units/ */
/* xxxxxxxxxxxx */
@media only screen and (min-width: 495px)
{
/* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */
/* Absolutely Magic! ... "fr" locks the width to the proportion of available space ... Always! Based on the Number! of "fr"s stated in */
/* "grid-template-columns:" as below ... similar (if not exactly the same) as Flex's "Grow" */
/* The cool! thing is that even when an element is removed using JS ... the remaining elements width-proportion doesn't change */
/* E.G. 1fr / (1fr 1fr 1fr 1fr) = 20% ... and if you remove say 2 elements ... the remaining 3 still have a width of 20% */
/* "auto" on the other hand as was used before ... expands the remaining elements to fill 100% of the available space */
/* after any elements have been removed */
.grid-container_mobile
{
/* grid-template-columns: auto; */
grid-template-columns: 1fr 1fr 1fr;
}
#image_block_1 { grid-template-columns: auto auto auto auto; }
}
@media only screen and (min-width: 768px) {
.grid-container_mobile {
/* grid-template-columns: auto auto; */
grid-template-columns: 1fr 1fr 1fr;
}
}
@media only screen and (min-width: 992px) {
.grid-container_mobile {
/* grid-template-columns: auto auto auto; */
grid-template-columns: 1fr 1fr 1fr;
}
}
@media only screen and (min-width: 1200px) {
.grid-container_mobile {
/* grid-template-columns: auto auto auto auto; */
grid-template-columns: 1fr 1fr 1fr;
}
}
@media only screen and (min-width: 1350px) { /* Bootstrap's highest is ... 1200px ... according to the above link */
.grid-container_mobile {
/* grid-template-columns: auto auto auto auto auto; */
/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
}
@media only screen and (min-width: 1600px) { /* Adjust the screen width at a separate break point here */
.grid-container_mobile {
/* width: 70%; */ /* 06-06-2024: grid container is now inside a "page_description_content_test" */
}
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 10px;
border: 1px solid red;
transition: 0.1s;
}
.grid-container img {
padding: 3%;
/* border: 1px solid green; */
/* Stops image making parent DIV larger ... becomes effective only when natural image size is larger than calculated via CSS */
width: 100%;
}
.product_title {
text-decoration: underline;
margin-bottom: 10px;
}