3

I have added best seller on my homepage referring to this link https://blog.amasty.com/how-to-display-bestselling-products-in-magento-source-code/ but it is not responsive, I want to make it responsive so that products in best seller block doesn't hide with the horizontal scroll bar(at the bottom)enter image description here

closed as off-topic by Keyul Shah, Murtuza Zabuawala, Arunendra, Amit Bera, brentwpeterson Mar 21 '17 at 15:32

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about third-party modules are generally off-topic because the scope of functionality and code are not available. For more information, see this meta post/answer." – Murtuza Zabuawala, Arunendra, Amit Bera, brentwpeterson
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    I'm voting to close this question as off-topic because it is about css – Mufaddal Oct 3 '15 at 10:02
  • 1
    css comes under magento – Swetha Oct 3 '15 at 10:07
  • 2
    What have you tried? What is the problem? There is no question mark in this question. Please edit your question, give a context and explain what the exact problem is. – Fabian Blechschmidt Oct 3 '15 at 10:34
3

I got the answer by just adding following code in my css file

float:left
1

You can use responsive carousel

http://owlgraphic.com/owlcarousel/

http://owlgraphic.com/owlcarousel/#demo


<?php $_productCollection=$this->getLoadedProductCollection();?>
<?php if ($_productCollection>count()): ?>
    <div class="owl-carousel-wrapper">
        <div class="owl-carousel" id="home-product-slider">
            <?php foreach ($_productCollection as $_product): ?>
                <div class="item">
                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
                    <?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
                    <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped; ?>"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></a></h2>
                    <?php echo $this->getPriceHtml($_product, true) ?>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
    <script>
        jQuery(document).ready(function() {
            var owl = jQuery("#home-product-slider");
            owl.owlCarousel({
                responsiveClass: true,
            });
        });
    </script>
<?php endif; ?>
  • I tried using this but I am not understanding how to add this to my products. – Swetha Oct 3 '15 at 10:03
  • edited my answer with script – Akhilesh Patel Oct 3 '15 at 10:16
  • please guide me where i shud put this code – Swetha Oct 3 '15 at 10:20
  • You will just need to find your bestseller phtml template file and replace that code with this new one. – Akhilesh Patel Oct 3 '15 at 10:27
  • If i replace my phtml code with the above code then the best seller is not at all displaying on my home page – Swetha Oct 3 '15 at 10:35

Not the answer you're looking for? Browse other questions tagged or ask your own question.