When adding some product in my shopping cart the search field of the site does not appear and I can not identify why I was deleting what I could from the files .css
that I have and even then I could not reach a result. / p>
I think it might be something related to clearfix, but my css knowledge does not allow me to do a better analysis.
The page can be viewed here: Insertion of Products in the cart
The search field is thus configured:
<form id="search-form" action="busca.php" method="post">
<input id="s" type="text" name="s" placeholder="Busca" style="display: none;">
<input id="search-submit" type="submit" name="search-submit" value="Search">
My cart call looks like this:
<section id="content" class="container clearfix">
<header id="page-header">
<h1 id="page-title">MEU CARRINHO</h1>
</header><br><br>
<p>
<?php
$class->setURL($url);
$class->carrinho();
?>
</p>
And the css that mounts the cart is this:
.product-image { float: left; width: 20%; } .product-details { float: left; width: 37%; } .product-quantity { float: left; width: 10%; } /* This is used as the traditional .clearfix class */ .group:before, .shopping-cart:before, .column-labels:before, .product:before, .totals-item:before, .group:after, .shopping-cart:after, .column-labels:after, .product:after, .totals-item:after { content: ''; display: table; } .group:after, .shopping-cart:after, .column-labels:after, .product:after, .totals-item:after { clear: both; } .group, .shopping-cart, .column-labels, .product, .totals-item { zoom: 1; } /* Apply clearfix in a few places */ /* Apply dollar signs */ .product .product-price:before, .product .product-line-price:before, .totals-value:before { content: '$'; } label { color: #aaa; } .shopping-cart { margin-top: -45px; } /* Column headers */ .column-labels label { padding-bottom: 15px; margin-bottom: 15px; /* border-bottom: 1px solid #eee; */} .column-labels .product-image, .column-labels .product-details, .column-labels .product-removal { text-indent: -9999px; } /* Product entries */ .product { margin-bottom: 20px; padding-bottom: 10px; } .product .product-image { text-align: center; } .product .product-image img { width: 100px; } .product .product-details .product-title { margin-right: 20px; font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium"; } .product .product-details .product-description { margin: 5px 20px 5px 0; line-height: 1.4em; } .product .product-quantity input { width: 40px; } .product .remove-product { border: 0; padding: 4px 8px; background-color: #c66; color: #fff; font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium"; font-size: 12px; border-radius: 3px; } .product .remove-product:hover { background-color: #a44; } /* Totals section */ .totals .totals-item { float: right; clear: both; width: 100%; margin-bottom: 10px; } .totals .totals-item label { float: left; clear: both; width: 79%; text-align: right; } .totals .totals-item .totals-value { float: right; width: 21%; text-align: right; } .totals .totals-item-total { font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium"; } .checkout { float: right; border: 0; margin-top: 20px; padding: 6px 25px; background-color: #6b6; color: #fff; font-size: 25px; border-radius: 3px; } .checkout:hover { background-color: #494; } /* Make adjustments for tablet */ @media screen and (max-width: 650px) { .shopping-cart { margin: 0; padding-top: 20px; /*border-top: 1px solid #eee;*/ } .column-labels { display: none; } .product-image { float: right; width: auto; } .product-image img { margin: 0 0 10px 10px; } .product-details { float: none; margin-bottom: 10px; width: auto; } .product-price { clear: both; width: 70px; } .product-quantity { width: 100px; } .product-quantity input { margin-left: 20px; } .product-quantity:before { /* content: 'x'; */ } .product-removal { width: auto; } .product-line-price { float: right; width: 70px; } } /* Make more adjustments for phone */ @media screen and (max-width: 350px) { .product-removal { float: right; } .product-line-price { float: right; clear: left; width: auto; margin-top: 10px; } .product .product-line-price:before { content: 'Item Total: $'; } .totals .totals-item label { width: 60%; } .totals .totals-item .totals-value { width: 40%; } }