Page not displaying correctly in Mobile view

Question

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 div   class = "side-bar col-md-3" >    div   class = "search-hotel" >    h3   class = "agileits-sear-head" >    Search Here.. h3 >    form   action = "#"   method = "post" >    input   type = "search"   placeholder = "Product name..."   name = "search"   required = "" >    input   type = "submit"   value = " " >    form >    div >       div   class = "left-side" >    h3   class = "agileits-sear-head" >    Category h3 >    ul   id = "accordion"   class = "accordion" >    asp:DataList   ID = "dlCategory"   runat = "server"   RepeatColumns = "1"   RepeatDirection = "Vertical"    OnItemDataBound = "dlCategory_ItemDataBound" >    ItemTemplate >    li >    div   class = "link" >    %#Eval("Category_Name") % > i   class = "fa fa-chevron-down" > i > div >    ul   class = "submenu" >    asp:Repeater   ID = "rptProducts"   runat = "server" >    ItemTemplate >    li >    asp:HyperLink   ID = "hypProduct"   runat = "server"   NavigateUrl = ' '    Text = ' ' >   asp:HyperLink >    li >    ItemTemplate >    asp:Repeater >    ul >    li >    ItemTemplate >    asp:DataList >    ul >    div >       div >    Other side products code div   class = "agileinfo-ads-display col-md-9 w3l-rightpro" >    div   class = "wrapper" >    div   class = "product-sec1" >    asp:DataList   ID = "dlistProduct"   runat = "server"   RepeatDirection = "Horizontal"   RepeatColumns = "3"   >    ItemTemplate >    div   class = "col-sm-3" >    div   class = "men-pro-item simpleCart_shelfItem" >    div   class = "men-thumb-item" >    img   src = "images/k1.jpg"   alt = "" >    div >    div   class = "item-info-product " >    h4 >    a   href = "single.html" > Zeeba Basmati Rice a >    h4 >    div   class = "snipcart-details top_brand_home_details item_add single-item hvr-outline-out" >    form   action = "#"   method = "post" >    fieldset >    input   type = "hidden"   name = "cmd"   value = "_cart"   />    input   type = "hidden"   name = "add"   value = "1"   />    input   type = "hidden"   name = "business"   value = " "   />    input   type = "hidden"   name = "item_name"   value = "Zeeba Basmati Rice - 5 KG"   />    input   type = "hidden"   name = "amount"   value = "950.00"   />    input   type = "hidden"   name = "discount_amount"   value = "1.00"   />    input   type = "hidden"   name = "currency_code"   value = "USD"   />    input   type = "hidden"   name = "return"   value = " "   />    input   type = "hidden"   name = "cancel_return"   value = " "   />    input   type = "submit"   name = "submit"   value = "Add to cart"   class = "button"   />    fieldset >    form >    div >    div >    div >    div >    ItemTemplate >    asp:DataList >    div   class = "clearfix" > div >    div >    Output pictures : Full display and mobile display   Mobile View

Laxmidhar Sahoo · Answer

I mean some where used the unit px or % for padding or margin .Insted of the px and % used em

Akash Patel · Answer

User defined class is for side menu not products. for products css files are used which is placed in seperate folder

Laxmidhar Sahoo · Answer

I think you use the boostrap with some user define css class.is it right. If yes what are the user define classes please display