Author Topic: some tricks for fixed navbar and displaying products according to screen size  (Read 1296 times)

rvalani

  • Guest
Hi guys,
I just wanted to share a small hack where you can change the view of products listed on your website..
For responsiveness if you want when user is on tablet rather than displaying four products we can display three products in one row and for mobile view if you want two products in one row then change the following:
/storefront/view/default/template/blocks/product_list.tpl
change line #32 <div class="col-md-3 col-sm-6 col-xs-12"> to <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
/storefront/view/default/template/pages/product/product_listing.tpl
change line #32 <div class="col-md-3 col-sm-6 col-xs-12"> to <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">

If you want your navbar to stay on-top always then modify the following line:
/storefront/view/default/template/common/header.tpl line#2 <div class="headerstrip navbar navbar-inverse" role="navigation"> to <div class="headerstrip navbar navbar-inverse navbar-fixed-top" role="navigation">

Note: Do take backup before you try this..
If you have any doubts feel free to write here I will be more than happy to help you

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 3210
  • Karma: +152/-0
    • View Profile
Hi.
Thanks for sharing
“Chuck Norris is so amazing.”
― Mother Teresa

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 3167
  • Karma: +229/-9
    • View Profile
    • Ideal Open Source Ecommerce Solution
good trick!
We need your help to build better free open source eCommerce platform for everyone.
See how you can help

 

Cheap Prom dresses 2018