Skip to main content

Cat Wrapper for Fence-It LOGO-ICONS class

Below are 4 different ways to set up the cat wrapper for Fence-It page. The extra class of .logo-icons has been added to the containing div as the selector for this layout. Wihtout leaving space for an absent logo, the product images will not line up, so the .cat-logo div is necessary in all instances.

Note: For cat wrapper with both logo and icons set up like this:

<div class="cat-wrapper logo-icons">
<div class="cat-item-wrapper">
<a class="cat-img-link" href="#">
<div class="cat-logo">
<img src="#" alt=""/>
</div>
<img src="#" class="cat-img" height="250" width="250" alt=""/>
<div class="cat-product-shop">
<h3 class="cat-product-name">**cat item name goes here**</h3>
</div>
<div class="cat-icons">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
</div>
</a>
</div>

</div>

opt1-banner

Note: For cat wrapper without logo only. To save space for the logo, please include an empty div class of .cat-logo as the first child of the href tag.

<div class="cat-wrapper logo-icons">
<div class="cat-item-wrapper">
<a class="cat-img-link" href="#" >
<div class="cat-logo">
</div>
<img src="#" class="cat-img" height="250" width="250" alt="" />
<div class="cat-product-shop">
<h3 class="cat-product-name">**cat item name goes here**</h3>
</div>
<div class="cat-icons">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
</div>
</a>
</div>
</div>

opt1-banner

Note: For cat wrapper without icons only, omit the div with class of cat-icons .

<div class="cat-wrapper logo-icons">
<div class="cat-item-wrapper">
<a class="cat-img-link" href="#">
<div class="cat-logo">
<img src="#" alt="" />
</div>
<img src="#" class="cat-img" height="250" width="250" alt="" />
<div class="cat-product-shop">
<h3 class="cat-product-name">**cat item name goes here**</h3>
</div>
</a>
</div>
</div>

opt1-banner

Note: For cat wrapper wihtout logo and icons, leaving only the product image and title, include ann empty div class of .cat-logo as the first child below the href tag and omit the div class of cat-icons .

    <div class="cat-item-wrapper">
<a class="cat-img-link" href="#">
<div class="cat-logo">
</div>
<img alt="image description goes here" class="cat-img" height="250" src="#" width="250" />
<div class="cat-product-shop">
<h3 class="cat-product-name">**cat item name goes here**</h3>
</div>
</a>
</div>

opt1-banner