CODEWITHSUNDEEP
htmlcsswordpresswoocommerce
francoboy7
francoboy7

Reputation: 303

Trouble with my css

I'm using wordpress and woocommerce and I'm having difficulty with the css on single product pages :

The red border should surround all the content like here : http://lebruloir.com/cafe-bistrot/

But when on single product page it is all messed up : http://lebruloir.com/boutique/test/

I'm pretty sure it is a really simple solution but I can't seem to find it.

the code of woocommerce.php (which is used to display content) PS : it is normal that there is a alone it is closing a div called from the header

Thank you so much

<?php get_header(); ?>




<div class="col span_5_of_8 transparent">
        <div class="site-content">


                <?php if ( function_exists('yoast_breadcrumb') ) {
                yoast_breadcrumb('<p id="breadcrumbs">','</p>');
                } ?>

                <div class="border"></div>


<?php woocommerce_content(); ?>
        </div>


</div>

Upvotes: 1

Views: 63

Answers (1)

davidpauljunior
davidpauljunior

Reputation: 8338

This is caused by the floating content inside the <div> with the border.

Try adding overflow: auto to .site-content.

.site-content {
  font-family: 'Radley', 'Libre Baskerville', 'Fenix', serif;
  color: #6B0001;
  font-size: 110%;
  z-index: 1;
  word-wrap: break-word;
  padding: 4% 4% 0;
  border: solid 1px #6B0001;
  margin: 15px 15px 15px;
  overflow: auto; /* ADD THIS */
}

Upvotes: 2

Related Questions