HTML button displays very differently on 2 pages with same CSS - html

Question

I have two web pages - one is a Product Listings Page:
/*BUTTON STYLE*/
button {
background-color: #132257;
color: white;
border: 0.25em solid white;
cursor: pointer;
width: 100%;
height: 90%;
}
/*PRODUCT LISTINGS PAGE*/
.shoplayout {
grid-area: MC;
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-areas: "filters listing";
}
.filters {
grid-area: filters;
}
.listing {
grid-area: listing;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75em;
}
.product {
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(6, auto);
border: 0.125em solid #1b2493;
}
.product>* {
height: 8vh;
line-height: 8vh;
border-bottom: solid 0.02em #1b2493;
padding-left: 0.25em;
}
.product div:nth-child(even) {
/*Every second div within a product has the same background*/
background-color: lightsteelblue;
}
.productbuy {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
border: none;
}
.productpic {
grid-row: 1;
padding: 0;
border: none;
display: flex;
justify-items: center;
height: 20vh;
}
.productpic>img {
/*https: //stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container*/
max-width: 100%;
max-height: 100%;
}
/*PRODUCT DETAILS PAGE*/
.productdetails {
grid-area: MC;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, auto);
gap: 1em;
}
.productdetails>* {
border-bottom: solid 0.02em #1b2493;
padding-left: 0.25em;
}
.picdetail {
grid-column: 1 / span 2;
grid-row: 1;
background-color: cornsilk;
justify-items: center;
border: none;
}
.picdetail img {
max-width: 100%;
max-height: 100%;
}
.productnumbers {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
}
<!-- CONTENT -->
<div class="content" id="elemToSlide">
<div class="shoplayout">
<div class="listing">
<!--ALL PRODUCTS IN HERE-->
<div class="product">
<div>Ch. BonPlonque, 2019</div>
<div>Bordeaux, France</div>
<div>Crisp fresh white</div>
<div>3.21/5, 3 reviews</div>
<!--DISPLAY AS A 4 COL INNER GRID-->
<div class="productbuy">
<div>€15.95</div>
<div>Stock: 5</div>
<div><button>Buy</button></div>
<div>Qty</div>
</div>
</div>
<!--END LISTING COLUMNS-->
</div>
<!--END SHOP CONTENT-->
</div>
One is a Products Details Page:
/*BUTTON STYLE*/
button {
background-color: #132257;
color: white;
border: 0.25em solid white;
cursor: pointer;
width: 100%;
height: 90%;
}
/*PRODUCT LISTINGS PAGE*/
.shoplayout {
grid-area: MC;
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-areas: "filters listing";
}
.filters {
grid-area: filters;
}
.listing {
grid-area: listing;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75em;
}
.product {
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(6, auto);
border: 0.125em solid #1b2493;
}
.product>* {
height: 8vh;
line-height: 8vh;
border-bottom: solid 0.02em #1b2493;
padding-left: 0.25em;
}
.product div:nth-child(even) {
/*Every second div within a product has the same background*/
background-color: lightsteelblue;
}
.productbuy {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
border: none;
}
.productpic {
grid-row: 1;
padding: 0;
border: none;
display: flex;
justify-items: center;
height: 20vh;
}
.productpic>img {
/*https: //stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container*/
max-width: 100%;
max-height: 100%;
}
/*PRODUCT DETAILS PAGE*/
.productdetails {
grid-area: MC;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, auto);
gap: 1em;
}
.productdetails>* {
border-bottom: solid 0.02em #1b2493;
padding-left: 0.25em;
}
.picdetail {
grid-column: 1 / span 2;
grid-row: 1;
background-color: cornsilk;
justify-items: center;
border: none;
}
.picdetail img {
max-width: 100%;
max-height: 100%;
}
<!--,GRID CELL 5, 2 - DISPLAYS AS A 4 COL INNER GRID-->
<div class="productbuy">
<div>€15.95</div>
<div>Stock: 5</div>
<div><button>Buy</button></div>
<div>Qty</div>
</div>
Pretty much everything displays as I want with the exception of the button captioned BUY:
The HTML for the .productbuy element is identical in both cases, the CSS is identical in both cases 9with the exception of the nth child background-color), the button style applies across the entire website, so I am puzzled as to why this is happening.
Any and all suggestions gratefully received.

Answer 1

Thanks to both MD Code and Andrea who spotted that there must have been a problem with the parent containers. In the second case, the product details page, there was a div missing from the page structure, and the CSS for both pages was somewhat messy.
So I tidied things up and it works perfectly now.
Product Details Page HTML is now:
<!-- CONTENT -->
<div class="content" id="elemToSlide">
<!--DETAIL LAYOUT-->
<div class="detailslayout">
<!--A WINE-->
<div class="detailspic">
<img src="images/products/winehorizontallarge.png" />
</div>
<div>Name and vintage</div>
<div>Origin</div>
<div>Description</div>
<div>Reviews</div>
<div>Grapes</div>
<div>Producer</div>
<div class="detailsnumbers">
<div>TA</div>
<div>pH</div>
<div>RS</div>
<div>ABV</div>
</div>
<div class="productbuy">
<div>€15.95</div>
<div>Stock: 5</div>
<div><button>Buy</button></div>
<div>Qty</div>
</div>
<!--END WINE-->
</div>
<!--END DETAIL LAYOUT-->
</div>
<!--END CONTENT-->
Putting in the div "DetailsLayout" meant the page structure was correct; I then tidied up the CSS:
/*LAYOUT FOR THE PLP*/
.shoplayout {
grid-area: MC;
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-areas: "filters listing";
}
/*LAYOUT FOR THE PDP - THIS WAS MISSING PREVIOUSLY*/
.detailslayout {
grid-area: MC;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, auto);
gap: 1em;
}
.detailslayout > * {
height: 8vh;
line-height: 8vh;
}
.products {
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(6, auto);
border: 0.125em solid #1b2493;
}
.products > * {
height: 8vh;
line-height: 8vh;
border-bottom: solid 0.02em #1b2493;
padding-left: 0.25em;
}
.products div:nth-child(even) {
background-color: lightsteelblue;
}
.productbuy {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
border: none;
background-color: lightsteelblue;
}
.productpic {
grid-row: 1;
padding: 0;
border: none;
display: flex;
justify-items: center;
height: 20vh;
}
.productpic img, .detailspic img {
max-width: 100%;
max-height: 100%;
}
.detailspic {
grid-column: 1 / span 2;
grid-row: 1 ;
background-color: cornsilk;
justify-items: center;
border: none;
height: 20vh;
}
.detailsnumbers {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
}
Now, on both pages the buttons render in the same way on the PLP:
And on the PDP:
Thanks to all for your help,
Dermot

Answer 2

The problem is not your style, button is working good but on details page your button's styles is according to the div parent change div parent style