How To Change Compare Page CSS
How To Change Compare Page CSS
.compare-products-page {
position: relative;
overflow: hidden;
}
.compare-products-page .clear-list {
display: inline-block;
margin: 0 0 20px;
background-color: #4ab2f1;
padding: 10px 15px;
font-size: 12px;
color: #fff;
text-transform: uppercase;
}
.compare-products-page .clear-list:hover,
.compare-products-page .clear-list:focus {
background-color: #248ece;
}
.compare-products-page .table-wrapper {
margin: 0 0 30px;
padding: 0 0 1px; /*IE mobile table border fix*/
}
.compare-products-table td {
min-width: 150px;
border: 1px solid #ddd;
background-color: #fff;
padding: 20px;
text-align: left;
vertical-align: top;
color: #444;
}
.compare-products-table td:first-child {
min-width: 0;
}
.compare-products-table td label {
font-weight: normal;
color: #777;
}
.compare-products-table .specification-group td {
border: 0;
padding: 20px 10px 10px 10px;
}
.compare-products-table .specification-group td label {
font-size: 16px;
color: #444;
}
.compare-products-table .remove-button {
display: inline-block;
border: none;
background: url('../images/remove.png') left center no-repeat;
padding: 0 0 0 18px;
font-size: 12px;
color: #666;
}
.compare-products-table .remove-button:hover,
.compare-products-table .remove-button:focus {
color: #4ab2f1;
}
.compare-products-table .picture {
display: block;
position: relative;
max-width: 200px;
height: 200px;
overflow: hidden;
}
.compare-products-table .picture img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
}
.compare-products-table .product-name td {
font-weight: bold;
}
.compare-products-table .product-name td a:hover,
.compare-products-table .product-name td a:focus {
color: #4ab2f1;
}
.compare-products-table .short-description td {
line-height: 22px;
}
.compare-products-table .full-description td {
display: none;
}
.compare-products-page .no-data {
margin: 25px 0 0;
}
@media all and (min-width: 1001px) {
/*** COMPARE LIST ***/
.compare-products-page .page-title {
margin: 0 0 -1px;
}
.compare-products-page .clear-list {
position: absolute;
top: 7px;
right: 0;
}
.compare-products-table .full-description td {
display: table-cell;
}
.compare-products-table .full-description td p {
margin-top: 0;
}
}
Modified at 8 months ago