3
Answers

Page not displaying correctly in Mobile view

Akash Patel

Akash Patel
6y
450
1
I am working on a project where products are to be displayed. the page is divided in two parts namely sidebar which contains menus and other side products which diplays 3 products in each row. in fullscreen it perfectly works but in mobile view the products doesnt display vertically. Below is the code.
ASP Code
Sidebar Code
  1. <div class="side-bar col-md-3">  
  2. <div class="search-hotel">  
  3. <h3 class="agileits-sear-head">  
  4. Search Here..</h3>  
  5. <form action="#" method="post">  
  6. <input type="search" placeholder="Product name..." name="search" required="">  
  7. <input type="submit" value=" ">  
  8. </form>  
  9. </div>  
  10. <!-- food preference -->  
  11. <div class="left-side">  
  12. <h3 class="agileits-sear-head">  
  13. Category</h3>  
  14. <ul id="accordion" class="accordion">  
  15. <asp:DataList ID="dlCategory" runat="server" RepeatColumns="1" RepeatDirection="Vertical"  
  16. OnItemDataBound="dlCategory_ItemDataBound">  
  17. <ItemTemplate>  
  18. <li>  
  19. <div class="link">  
  20. <%#Eval("Category_Name") %><i class="fa fa-chevron-down"></i></div>  
  21. <ul class="submenu">  
  22. <asp:Repeater ID="rptProducts" runat="server">  
  23. <ItemTemplate>  
  24. <li>  
  25. <asp:HyperLink ID="hypProduct" runat="server" NavigateUrl='<%# GetUrl(Eval("PID"))%>'  
  26. Text='<%#Eval("Product_Name") %>'> </asp:HyperLink>  
  27. </li>  
  28. </ItemTemplate>  
  29. </asp:Repeater>  
  30. </ul>  
  31. </li>  
  32. </ItemTemplate>  
  33. </asp:DataList>  
  34. </ul>  
  35. </div>  
  36. <!-- //food preference -->  
  37. </div>  
Other side products code
  1. <div class="agileinfo-ads-display col-md-9 w3l-rightpro">  
  2. <div class="wrapper">  
  3. <div class="product-sec1">  
  4. <asp:DataList ID="dlistProduct" runat="server" RepeatDirection="Horizontal" RepeatColumns="3" >  
  5. <ItemTemplate>  
  6. <div class="col-sm-3">  
  7. <div class="men-pro-item simpleCart_shelfItem">  
  8. <div class="men-thumb-item">  
  9. <img src="images/k1.jpg" alt="">  
  10. </div>  
  11. <div class="item-info-product ">  
  12. <h4>  
  13. <a href="single.html">Zeeba Basmati Rice</a>  
  14. </h4>  
  15. <div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out">  
  16. <form action="#" method="post">  
  17. <fieldset>  
  18. <input type="hidden" name="cmd" value="_cart" />  
  19. <input type="hidden" name="add" value="1" />  
  20. <input type="hidden" name="business" value=" " />  
  21. <input type="hidden" name="item_name" value="Zeeba Basmati Rice - 5 KG" />  
  22. <input type="hidden" name="amount" value="950.00" />  
  23. <input type="hidden" name="discount_amount" value="1.00" />  
  24. <input type="hidden" name="currency_code" value="USD" />  
  25. <input type="hidden" name="return" value=" " />  
  26. <input type="hidden" name="cancel_return" value=" " />  
  27. <input type="submit" name="submit" value="Add to cart" class="button" />  
  28. </fieldset>  
  29. </form>  
  30. </div>  
  31. </div>  
  32. </div>  
  33. </div>  
  34. </ItemTemplate>  
  35. </asp:DataList>  
  36. <div class="clearfix"></div>  
  37. </div>  
Output pictures : Full display and mobile display
 
Mobile View
 
Answers (3)
Next Recommended Forum