AbanteCart Community

Shopping Cart Operations => Tips and Tricks => Topic started by: rvalani on October 11, 2016, 04:36:10 PM

Title: some tricks for fixed navbar and displaying products according to screen size
Post by: rvalani on October 11, 2016, 04:36:10 PM
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
Title: Re: some tricks for fixed navbar and displaying products according to screen size
Post by: Basara on October 12, 2016, 09:48:19 AM
Hi.
Thanks for sharing
Title: Re: some tricks for fixed navbar and displaying products according to screen size
Post by: abantecart on October 12, 2016, 10:06:54 AM
good trick!