locked
How could I make page to open with upper left corner at position (0,0) on mobile devices? RRS feed

  • Question

  • User426001450 posted

    I do have an asp.net with master pages, CSS and Bootstrap. Page is working fine but when I open it in some mobile devices like iPhone, it pops up very small first and in less than a second it goes to normal size. There is no problem with that; the only thing is that after that about 2/3 of the page display out screen.  Any idea how or what should I do to make the page to open with its left upper corner at (0,0) always does not matter what?

    Thanks to all !

    Friday, February 14, 2020 8:36 PM

Answers

  • User1535942433 posted

    Hi vstorpedo,

    Accroding to your codes,I suggest you could remove the css of style.It will affect the view.

    At the same time,if you want to open the page on mobile devices,you could only use col-xs and col-sm.These are fit small screen.

    More details,you could refer to below codes:

    <%@ Master Language="VB" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    
    <script runat="server">
    
        Sub Page_Load()
    
        End Sub
    
    
    </script>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
    
    
    
    <!-- This code tell the device to adjust font size according to the device size -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    
    
    <!-- This code include the links for bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
    
    
    <!-- jQuery library -->
    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
           
    <!-- Latest compiled JavaScript -->
    <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 
         
        <title>Home Page Only</title>
        <link href="../CSS/Universal.css" rel="stylesheet" type="text/css" />
    
        <style type="text/css">
            .style5
            {
                width: 380px;
                }
            .style7
            {
                height: 52px;
            }
            .style17
            {
                width: 30px;
            }
            .style18
            {
                width: 641px;
            }
            .style20
            {
                width: 416px;
            }
            .style21
            {
                width: 99%;
                height: 59px;
            }
            .style23
            {}
            .fb-like
            {
                width: 85px;
            }
            .style24
            {
                width: 697px;
            }
            .style25
            {
                width: 796px;
            }
            .style26
            {
                width: 1088px;
            }
            .style27
            {
                width: 890px;
            }
            .style28
            {
                width: 762px;
            }
            .style29
            {
                width: 773px;
            }
            .style30
            {
                width: 99%;
            }
            .style31
            {
                width: 131px;
            }
            .style1
            {
                width: 1047px;
            }
        </style>
    
    </head>
    
    
    
    <body>
    
    
    
    
    
    
    
    
        <form id="form1" runat="server">
    
    
            <!-- *********************************-->
            <!-- Bootstrap grid line for the logo, loging, location, mail etc -->
            <!-- *********************************-->
            
               <div class="container">
     
                   <div class="row">  
    
                        <div class="col-xs-2 col-sm-2" >
                             <!-- Something go here  -->                                              
                        </div>
           
    	                <div class="col-xs-6 col-sm-6" >
                             <!-- Something go here -->
    	                </div>
    
                        <div class="col-xs-4 col-sm-4" >
                              <!-- Nothing go here for now -->
                        </div>
    	  
                 </div>
                   
    
    
    
    
    
            <!-- *********************************-->
            <!-- Bootstrap grid line for the main menu -->
            <!-- *********************************-->
        
            <div class="row">   
    
               <div class="col-xs-4 col-sm-4" >
                     <!-- Something go here  -->
               </div>
                   
               <div class="col-xs-4 col-sm-4" >
                    <!-- Nothing go here for now -->
               </div>
    
               <div class="col-xs-4 col-sm-4" >
                     <!-- Nothing go here for now -->
               </div> 
                
         </div>
    
    
    
    
    
    
    
            <!-- *********************************-->
            <!-- Code for horizontal line -->
            <!-- *********************************-->
            
               <div class="row"> 
                  <div class="col-xs-10 col-sm-10" >
                  <hr /> 
                  </div>
    
                  <div class="col-xs-2 col-sm-2" >
                     <!-- Nothing go here for now -->
                  </div> 
    
               </div>
          
    
    
    
    
    
    
    
    
            <!-- *********************************-->
            <!-- This is for the top Ad Rotator -->
            <!-- *********************************-->
    
    
             <div class="row ">  
               
                 <div class="col-xs-10 col-sm-10" >
                    <!-- Something go here  -->
                  </div>
                   
                  <div class="col-xs-2 col-sm-2" >
                     <!-- Nothing go here for now -->
                  </div> 
               
            </div>
    
      
    
    
    
    
    
    
    
    
            <!-- *********************************-->
            <!-- Code for horizontal line -->
            <!-- *********************************-->
        
               <div class="row"> 
                  <div class="col-xs-10 col-sm-10" >
                     <hr /> 
                  </div>
    
                  <div class="col-xs-2 col-sm-2" >
                     <!-- Nothing go here for now -->
                  </div> 
               </div>
          
    
            
    
    
            <!-- *********************************-->
            <!-- Code for the page columns -->
            <!-- *********************************-->
    
             <div class="row " >  
        
                 <!-- This is the first column and its content place holder -->
    
                 <div class="col-xs-4 col-sm-4 ColumnDesign">
                    <asp:contentplaceholder id="ContentPlaceHolder1"  runat="server"   >
                    </asp:contentplaceholder>
                 </div>
    
    
                 <!-- This is the second column, the code for the small ads and its content place holder -->
                 
                 <div class="col-xs-4 col-sm-4 ColumnDesign">
    
                     <!-- Something go here  -->
    
                     <asp:contentplaceholder id="ContentPlaceHolder4" runat="server">
                     </asp:contentplaceholder>
    
                </div>
                 
                  <!-- This is the third column -->
    
                 <div class="col-xs-4 col-sm-4 ColumnDesign">
                       <!-- Nothing go here for now -->
                 </div>
    
           </div>
    
    
    
    
     
            
            
            <!-- *********************************-->
            <!-- Code for horizontal line -->
            <!-- *********************************-->
        
               <div class="row"> 
                  <div class="col-xs-10 col-sm-10" >
                     <hr /> 
                  </div>
    
                  <div class="col-xs-2 col-sm-2" >
                     <!-- Nothing go here for now -->
                  </div> 
    
               </div>
        
             
    
    
    
    
    
            <!-- *********************************-->
            <!-- Code for end of the page -->
            <!-- *********************************-->
            
            <div class="row "> 
    
                  <div class="col-xs-1 col-sm-1" >
                      <!-- Something go here  -->
                  </div>
         
    
                  <div class="col-xs-1 col-sm-1" >
                      <!-- Something go here  -->
                  </div>
         
    
                  <div class="col-xs-1 col-sm-1" >
                      <!-- Something go here  -->
                  </div>
    
    
                  <div class="col-xs-1 col-sm-1" >
                      <!-- Something go here  -->
                  </div>
    
    
                  <div class="col-xs-1 col-sm-1" >
                      <!-- Something go here  -->
                  </div>
    
    
                  <div class="col-xs-1 col-sm-1" >
                      <!-- Something go here  -->
                  </div>
    
                  <div class="col-xs-6 col-sm-6" >
                      <!-- Nothing go here for now -->
                  </div>
    
           </div>
        
    
                         
           <br />
        
    
    
            <div class="row "> 
    
              <div class="col-xs-2 col-sm-2" >
                  <!-- Something go here  -->
              </div>  
    
              <div class="col-xs-2 col-sm-2" >
                 <!-- Something go here  -->
    	      </div>
                           
              <div class="col-xs-2 col-sm-2" >
                <!-- Something go here  -->
              </div>
               
              <div class="col-xs-6 col-sm-6" >
                 <!-- Nothing go here for now -->
              </div>   
                
           </div>
        
        
       
          <br />
          
    
            
          <div class="row ">
              <div class="col-xs-4 col-sm-4" >
                 <!-- Something go here  -->
              </div> 
              <div class="col-xs-8 col-sm-8" >
                <!-- Nothing go here for now -->
              </div>
          </div> 
        
    
    
          <div class="row ">
              <div class="col-xs-6 col-sm-6" >
               <!-- Something go here  -->
              </div> 
              <div class="col-xs-6 col-sm-6" >
                <!-- Nothing go here for now -->
              </div>
          </div>   
        
    
    
       </div>  <!-- This tag close the container class declare at the very top -->
    
                <br />
                <br />
                <br />
                   
        </form>
            
    </body>
    
    </html>

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 24, 2020 10:41 AM
  • User426001450 posted

    Ok guys, I read your suggestions and I’ve tried everything. After putting everything in place and after testing, I’ve found that there is not a ‘one hat fits all’ in the business of designing for all devices with bootstrap. In my case and since I’m coding specially for large screens it is better something like: <div class="col-lg-4" > or whatever the number of columns may be. When the page is open in small devices it will response and adjust automatically to that screen. You don’t have to add something like: <div class="col-xs-4 col-sm-4" >  

    On the other hand if you are designing specially for small devices something like: <div class="col-xs-4 col-sm-4" > may be better in your case and hopefully it will be responsive in large devices. But all come down to try, testing and viewing your result.  

    I cannot believe that the only one that understood my instructions and highlighted in red and green was ‘yij sun’, so even though I do thanks you all for your help, I’m marking yij sun’s response as the answer. Thanks to you all again.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 26, 2020 6:16 AM

All replies

  • User409696431 posted

    Can you give a link to the page you are talking about?  If by "after that about 2/3 of the page display out screen" you meant the page doesn't fit in the screen, and overflows, that sounds like an error in the design - it's not properly reponsive.

    Saturday, February 15, 2020 2:59 AM
  • User426001450 posted

    If by "after that about 2/3 of the page display out screen" you meant the page doesn't fit in the screen, and overflows, that sounds like an error in the design - it's not properly reponsive.

    Ok, I understand. So, how could I make it to fit in the screen and be properly responsive? Everything else is working fine beside that.

    Thanks

    Saturday, February 15, 2020 3:34 AM
  • User409696431 posted

    No one can tell you how to fix your problem.  We have no idea what your HTML markup / CSS/ Javascript is.  That's why I asked for a link to the problem page.

    Generally you should be able to use browser development tools and identify what is overflowing, and change the CSS with media queries so things fit in smaller viewports, or change your bootstrap classes.

    Saturday, February 15, 2020 5:54 AM
  • User426001450 posted

    Hello Kathy

    OK, I understand. As I said before, everything is working fine with the code, and the page displays normal on laptops and other big screens. The problem is with small devices like phones. I can see that the page is responsive as well on these screens, but you are right there is still some problem with the design and that is why page don't fit into small screens like phones. This is the link for the page: http://bglocal.com/Default.aspx

    Thanks

    Saturday, February 15, 2020 2:06 PM
  • User1535942433 posted

    Hi vstorpedo,

    Accroding to your description,as far as I think,Bootstrap is adaptive.

    Could you post your full codes to us ? It will help us solve your problem more faster.

    Best regards,

    Yijing Sun

    Tuesday, February 18, 2020 8:31 AM
  • User409696431 posted

    First, have you loaded jquery before the bootstrap.js?  I can't see jquery loaded anywhere in your page.

    Also, where are your bootstrap classes for small screens?  (Or, separate from boostrap, classes modified by CSS media queries for small screens.)

    At this point, all I can say is that your page doesn't resize for small screens because you haven't asked it to.

    Tuesday, February 18, 2020 4:44 PM
  • User-474980206 posted

    your class ColumnDesign set the width to 35% which cause whitespace on right. You have no markup for small screen, and you have overridden responsive widths so bootstrap does not work as expected.

    Tuesday, February 18, 2020 9:26 PM
  • User426001450 posted

    Hello guys, for those of you that were asking for me to post the entire page with the code, here it is.

    First, I’m new to bootstrap but I hope that with your expertise and help I could make this page look much better. You will find the entire code at the end of this post.  For those of you that are going to make corrections on the code, I would appreciate if you could do it in one of these two ways. 

    1) Delete, edit, correct, add or do whatever to the code and when you are done post it back to the forum. 

    2) Or, highlight in green your added part and in red what I should delete and post it back.

    I hope that I was clear, thanks to all and here is the code:

    <%@ Master Language="VB" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    
    <script runat="server">
    
        Sub Page_Load()
    
        End Sub
    
    
    </script>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
    
    
    
    <!-- This code tell the device to adjust font size according to the device size -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    
    
    <!-- This code include the links for bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
    
    
    <!-- jQuery library -->
    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
           
    <!-- Latest compiled JavaScript -->
    <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 
         
        <title>Home Page Only</title>
        <link href="../CSS/Universal.css" rel="stylesheet" type="text/css" />
    
        <style type="text/css">
            .style5
            {
                width: 380px;
                }
            .style7
            {
                height: 52px;
            }
            .style17
            {
                width: 30px;
            }
            .style18
            {
                width: 641px;
            }
            .style20
            {
                width: 416px;
            }
            .style21
            {
                width: 99%;
                height: 59px;
            }
            .style23
            {}
            .fb-like
            {
                width: 85px;
            }
            .style24
            {
                width: 697px;
            }
            .style25
            {
                width: 796px;
            }
            .style26
            {
                width: 1088px;
            }
            .style27
            {
                width: 890px;
            }
            .style28
            {
                width: 762px;
            }
            .style29
            {
                width: 773px;
            }
            .style30
            {
                width: 99%;
            }
            .style31
            {
                width: 131px;
            }
            .style1
            {
                width: 1047px;
            }
        </style>
    
    </head>
    
    
    
    <body>
    
    
    
    
    
    
    
    
        <form id="form1" runat="server">
    
    
            <!-- *********************************-->
            <!-- Bootstrap grid line for the logo, loging, location, mail etc -->
            <!-- *********************************-->
            
               <div class="container">
     
                   <div class="row">  
    
                        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                             <!-- Something go here  -->                                              
                        </div>
           
    	                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" >
                             <!-- Something go here -->
    	                </div>
    
                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" >
                              <!-- Nothing go here for now -->
                        </div>
    	  
                 </div>
                   
    
    
    
    
    
            <!-- *********************************-->
            <!-- Bootstrap grid line for the main menu -->
            <!-- *********************************-->
        
            <div class="row">   
    
               <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" >
                     <!-- Something go here  -->
               </div>
                   
               <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" >
                    <!-- Nothing go here for now -->
               </div>
    
               <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" >
                     <!-- Nothing go here for now -->
               </div> 
                
         </div>
    
    
    
    
    
    
    
            <!-- *********************************-->
            <!-- Code for horizontal line -->
            <!-- *********************************-->
            
               <div class="row"> 
                  <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10" >
                  <hr /> 
                  </div>
    
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                     <!-- Nothing go here for now -->
                  </div> 
    
               </div>
          
    
    
    
    
    
    
    
    
            <!-- *********************************-->
            <!-- This is for the top Ad Rotator -->
            <!-- *********************************-->
    
    
             <div class="row ">  
               
                 <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10" >
                    <!-- Something go here  -->
                  </div>
                   
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                     <!-- Nothing go here for now -->
                  </div> 
               
            </div>
    
      
    
    
    
    
    
    
    
    
            <!-- *********************************-->
            <!-- Code for horizontal line -->
            <!-- *********************************-->
        
               <div class="row"> 
                  <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10" >
                     <hr /> 
                  </div>
    
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                     <!-- Nothing go here for now -->
                  </div> 
               </div>
          
    
            
    
    
            <!-- *********************************-->
            <!-- Code for the page columns -->
            <!-- *********************************-->
    
             <div class="row " >  
        
                 <!-- This is the first column and its content place holder -->
    
                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 ColumnDesign">
                    <asp:contentplaceholder id="ContentPlaceHolder1"  runat="server"   >
                    </asp:contentplaceholder>
                 </div>
    
    
                 <!-- This is the second column, the code for the small ads and its content place holder -->
                 
                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 ColumnDesign">
    
                     <!-- Something go here  -->
    
                     <asp:contentplaceholder id="ContentPlaceHolder4" runat="server">
                     </asp:contentplaceholder>
    
                </div>
                 
                  <!-- This is the third column -->
    
                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 ColumnDesign">
                       <!-- Nothing go here for now -->
                 </div>
    
           </div>
    
    
    
    
     
            
            
            <!-- *********************************-->
            <!-- Code for horizontal line -->
            <!-- *********************************-->
        
               <div class="row"> 
                  <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10" >
                     <hr /> 
                  </div>
    
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                     <!-- Nothing go here for now -->
                  </div> 
    
               </div>
        
             
    
    
    
    
    
            <!-- *********************************-->
            <!-- Code for end of the page -->
            <!-- *********************************-->
            
            <div class="row "> 
    
                  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
                      <!-- Something go here  -->
                  </div>
         
    
                  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
                      <!-- Something go here  -->
                  </div>
         
    
                  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
                      <!-- Something go here  -->
                  </div>
    
    
                  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
                      <!-- Something go here  -->
                  </div>
    
    
                  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
                      <!-- Something go here  -->
                  </div>
    
    
                  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
                      <!-- Something go here  -->
                  </div>
    
                  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" >
                      <!-- Nothing go here for now -->
                  </div>
    
           </div>
        
    
                         
           <br />
        
    
    
            <div class="row "> 
    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                  <!-- Something go here  -->
              </div>  
    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                 <!-- Something go here  -->
    	      </div>
                           
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                <!-- Something go here  -->
              </div>
               
              <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" >
                 <!-- Nothing go here for now -->
              </div>   
                
           </div>
        
        
       
          <br />
          
    
            
          <div class="row ">
              <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" >
                 <!-- Something go here  -->
              </div> 
              <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xl-8" >
                <!-- Nothing go here for now -->
              </div>
          </div> 
        
    
    
          <div class="row ">
              <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" >
               <!-- Something go here  -->
              </div> 
              <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" >
                <!-- Nothing go here for now -->
              </div>
          </div>   
        
    
    
       </div>  <!-- This tag close the container class declare at the very top -->
    
                <br />
                <br />
                <br />
                   
        </form>
            
    </body>
    
    </html>
    

    Thursday, February 20, 2020 1:44 AM
  • User1535942433 posted

    Hi vstorpedo,

    Accroding to your codes,I suggest you could read the bootstrap grid of col-.One row sum of col- is 12.Uniform col- throughout the page.And you could accroding your size to choose the grid.Besides,I suggest you could redefine the css of media.

    More details,you could refer to below articles:

    https://forums.asp.net/t/2012929.aspx?Sizing+screen+to+fit+Android+or+IPhone

    https://getbootstrap.com/docs/4.0/layout/grid/

    Best regards,

    Yijing Sun

    Thursday, February 20, 2020 10:29 AM
  • User426001450 posted

    Accroding to your codes,I suggest you could read the bootstrap grid of col-.One row sum of col- is 12.Uniform col- throughout the page.And you could accroding your size to choose the grid.Besides,I suggest you could redefine the css of media.

    Sorry but I don't understand what you are trying to say here. May you please explain in details and if possible with some codes.

    Thanks 

    Thursday, February 20, 2020 5:54 PM
  • User-474980206 posted

    doing markup like this:

       <div class="col-lg-4" style="width: 20%">

    makes no sense. why override the bootstrap width? also if doing response, a "col-lg-4" generally needs an alternative for smaller devices. typically you handle at least two response sizes "sm" (phone) and "md" (tablet). you may then add "lg" (desktop) , and finally for extra credit "xl" (wide screen).

    the rules for responsive design is mobile first. design for phone, then add tablet and so on. its looks like you did a desktop ("lg") design only. you should really start over with phone layout.

    Thursday, February 20, 2020 6:09 PM
  • User426001450 posted

    bruce (sqlwork.com)

    doing markup like this:

       <div class="col-lg-4" style="width: 20%">

    makes no sense. why override the bootstrap width? also if doing response, a "col-lg-4" generally needs an alternative for smaller devices. typically you handle at least two response sizes "sm" (phone) and "md" (tablet). you may then add "lg" (desktop) , and finally for extra credit "xl" (wide screen).

    the rules for responsive design is mobile first. design for phone, then add tablet and so on. its looks like you did a desktop ("lg") design only. you should really start over with phone layout.

    Ok, I read what you said and everything was changed to code like this:

    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >

    Other may look like this:

               <div class="row"> 
                  <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10" >
                  <hr /> 
                  </div>
    
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                     <!-- Nothing go here for now -->
                  </div> 
               </div>

    There are some tags with 2, 4, 6 and so on. This number only tell the number of column to take to complete 12 by row.

    After all your suggestions I don't see much change at all on the page when opened with small devices like phones. Since I read everybody suggestions and I made all changes according to that, I would appreciate if all of you check the page online now. Please check it on all your devices and let me know what else I must change.

    This is the link for the online page: http://bglocal.com/Default.aspx?AcceptsCookies=yes

    Thanks to all for helping !

    Friday, February 21, 2020 4:58 AM
  • User426001450 posted

    Hello to all

    Ok, guys, I’ve done everything that you asked me to do and the page doesn’t response as it should. What is it that I’m doing wrong? I’m going to post my CSS and my skeleton markup html/bootstrap/master page. I’m saying skeleton because there is not language code there, I will only display the part that need to be fix for the page to be responsive. If you are going to make any correction, please highlight in red the part that I should remove and in green the part you are including.

    Thanks to all.

    Here is my CSS

     html
            {  
               font:14px Arial,Sans-Serif; 
               
            }
    
             hr
            {
                color:black;
                border-style: solid;
                border-width: 1px;
                margin: 0px;
                margin-top:5px;
                margin-bottom:5px;
                margin-left:0px
            }                      
    
            
             .clear
            {
                clear:both;
            }
    
            
            body
            {
              /*border-style:outset;           
                border-width:thick; This part can frame the whole page, but I disabled for now  */
              
              width:11in; margin:0 auto;/* This part center webpage automatically on the screen */
              background-color:#B6B6B6;          
            }           
            
            form
            {
              padding:5px;
              background-color:White;            
            } 
      
    
            
            div.ColumnDesign
            {
                margin-left: auto;
                margin-right: auto;
                border-color:Green;
                border-width:1px;
                border-style:solid;
                margin:1px; 
                padding:5px;
            }
           
            div.SmallAdColumnDesign
            {
                margin-left: auto;
                margin-right: auto;
                border-color: Green;
                border-width:1px;
                border-style:solid;
                margin:1px; 
                padding:5px;
            }
           
    
    
                  /*This is to format tables  */
             th, td {
                     padding: 3px;
                     text-align: left;
                    }
    
    
    
            row {
                   margin-right: -5px;
                   margin-left: -5px;
                  }
    
            container {
                  padding-right: 1px;
                  padding-left: 1px;
                  margin-right: auto;
                  margin-left: auto;
                  
                 }
    
            wrapper {
                     
                    }
    
    
    
    .menuButton {
        background-color: white; /* white */
        border: 2px solid #00693E;
        color: black;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
        width: 90%;
    }
    
    .menuButton:hover {
            background-color: #00693E;
            color: white;
            width: 90%;         
    }
    
    
    
    
    
    
    
    .menuButtonRed {
        background-color: white; /* white */
        border: 2px solid red;
        color: red;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
        width: 90%;
    }
    
        .menuButtonRed:hover {
            background-color: red;
            color: white;
            width: 90%;
        }
    
        
    
    
    
    
    
    /*  Define the background color for all the EVEN background rows in a table  */
    .TableClass tr:nth-child(even) {
        background: #FFFBD6;
    }
    
    
    
    /*  This is for all panels  */
    .panel_with_padding
    {    padding-top:5px;
         padding-left:5px;
         padding-right:5px;
         padding-bottom:5px; 
     }
    
    

    And here is my skeleton markup html/bootstrap/master page

    <%@ Master Language="VB" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    
    <script runat="server">
    
        Sub Page_Load()
    
        End Sub
    
    
    </script>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
    
    
    
    <!-- This code tell the device to adjust font size according to the device size -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    
    
    <!-- This code include the links for bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
    
    
    <!-- jQuery library -->
    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
           
    <!-- Latest compiled JavaScript -->
    <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 
         
        <title>Home Page Only</title>
        <link href="../CSS/Universal.css" rel="stylesheet" type="text/css" />
    
        <style type="text/css">
            .style5
            {
                width: 380px;
                }
            .style7
            {
                height: 52px;
            }
            .style17
            {
                width: 30px;
            }
            .style18
            {
                width: 641px;
            }
            .style20
            {
                width: 416px;
            }
            .style21
            {
                width: 99%;
                height: 59px;
            }
            .style23
            {}
            .fb-like
            {
                width: 85px;
            }
            .style24
            {
                width: 697px;
            }
            .style25
            {
                width: 796px;
            }
            .style26
            {
                width: 1088px;
            }
            .style27
            {
                width: 890px;
            }
            .style28
            {
                width: 762px;
            }
            .style29
            {
                width: 773px;
            }
            .style30
            {
                width: 99%;
            }
            .style31
            {
                width: 131px;
            }
            .style1
            {
                width: 1047px;
            }
        </style>
    
    </head>
    
    
    
    <body>
    
    
    
    
    
    
    
    
        <form id="form1" runat="server">
    
    
            <!-- *********************************-->
            <!-- Bootstrap grid line for the logo, loging, location, mail etc -->
            <!-- *********************************-->
            
               <div class="container">
     
                   <div class="row">  
    
                        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                             <!-- Something go here  -->                                              
                        </div>
           
    	                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" >
                             <!-- Something go here -->
    	                </div>
    
                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" >
                              <!-- Nothing go here for now -->
                        </div>
    	  
                 </div>
                   
    
    
    
    
    
            <!-- *********************************-->
            <!-- Bootstrap grid line for the main menu -->
            <!-- *********************************-->
        
            <div class="row">   
    
               <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" >
                     <!-- Something go here  -->
               </div>
                   
               <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" >
                    <!-- Nothing go here for now -->
               </div>
    
               <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" >
                     <!-- Nothing go here for now -->
               </div> 
                
         </div>
    
    
    
    
    
    
    
            <!-- *********************************-->
            <!-- Code for horizontal line -->
            <!-- *********************************-->
            
               <div class="row"> 
                  <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10" >
                  <hr /> 
                  </div>
    
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                     <!-- Nothing go here for now -->
                  </div> 
    
               </div>
          
    
    
    
    
    
    
    
    
            <!-- *********************************-->
            <!-- This is for the top Ad Rotator -->
            <!-- *********************************-->
    
    
             <div class="row ">  
               
                 <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10" >
                    <!-- Something go here  -->
                  </div>
                   
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                     <!-- Nothing go here for now -->
                  </div> 
               
            </div>
    
      
    
    
    
    
    
    
    
    
            <!-- *********************************-->
            <!-- Code for horizontal line -->
            <!-- *********************************-->
        
               <div class="row"> 
                  <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10" >
                     <hr /> 
                  </div>
    
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                     <!-- Nothing go here for now -->
                  </div> 
               </div>
          
    
            
    
    
            <!-- *********************************-->
            <!-- Code for the page columns -->
            <!-- *********************************-->
    
             <div class="row " >  
        
                 <!-- This is the first column and its content place holder -->
    
                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 ColumnDesign">
                    <asp:contentplaceholder id="ContentPlaceHolder1"  runat="server"   >
                    </asp:contentplaceholder>
                 </div>
    
    
                 <!-- This is the second column, the code for the small ads and its content place holder -->
                 
                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 ColumnDesign">
    
                     <!-- Something go here  -->
    
                     <asp:contentplaceholder id="ContentPlaceHolder4" runat="server">
                     </asp:contentplaceholder>
    
                </div>
                 
                  <!-- This is the third column -->
    
                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 ColumnDesign">
                       <!-- Nothing go here for now -->
                 </div>
    
           </div>
    
    
    
    
     
            
            
            <!-- *********************************-->
            <!-- Code for horizontal line -->
            <!-- *********************************-->
        
               <div class="row"> 
                  <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10" >
                     <hr /> 
                  </div>
    
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                     <!-- Nothing go here for now -->
                  </div> 
    
               </div>
        
             
    
    
    
    
    
            <!-- *********************************-->
            <!-- Code for end of the page -->
            <!-- *********************************-->
            
            <div class="row "> 
    
                  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
                      <!-- Something go here  -->
                  </div>
         
    
                  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
                      <!-- Something go here  -->
                  </div>
         
    
                  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
                      <!-- Something go here  -->
                  </div>
    
    
                  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
                      <!-- Something go here  -->
                  </div>
    
    
                  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
                      <!-- Something go here  -->
                  </div>
    
    
                  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
                      <!-- Something go here  -->
                  </div>
    
                  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" >
                      <!-- Nothing go here for now -->
                  </div>
    
           </div>
        
    
                         
           <br />
        
    
    
            <div class="row "> 
    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                  <!-- Something go here  -->
              </div>  
    
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                 <!-- Something go here  -->
    	      </div>
                           
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" >
                <!-- Something go here  -->
              </div>
               
              <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" >
                 <!-- Nothing go here for now -->
              </div>   
                
           </div>
        
        
       
          <br />
          
    
            
          <div class="row ">
              <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" >
                 <!-- Something go here  -->
              </div> 
              <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xl-8" >
                <!-- Nothing go here for now -->
              </div>
          </div> 
        
    
    
          <div class="row ">
              <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" >
               <!-- Something go here  -->
              </div> 
              <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" >
                <!-- Nothing go here for now -->
              </div>
          </div>   
        
    
    
       </div>  <!-- This tag close the container class declare at the very top -->
    
                <br />
                <br />
                <br />
                   
        </form>
            
    </body>
    
    </html>
    

    Friday, February 21, 2020 4:32 PM
  • User-474980206 posted

    its unlikely that what fits in col-2 on a desktop will fit in a col-2 on a phone. all you done, is explicitly force the same grid for all sizes (which you had before implicitly). but this should work as long as you don't use the style<number> classes you defined as these are not responsive and will blow the grid sizes.  

    again you should start with mobile layout and xs/sm. for your simple layout you could probably just do sm & lg. use chrome and its developer tools.

    Friday, February 21, 2020 7:06 PM
  • User426001450 posted

    Ok, please post a sample code of what you want me to change. I hope that you read this part from my last post "If you are going to make any correction, please highlight in red the part that I should remove and mark in green the part you are including." We all learn with samples, show me the code.

    Thanks

    Friday, February 21, 2020 8:27 PM
  • User1535942433 posted

    Hi vstorpedo,

    Accroding to your codes,I suggest you could remove the css of style.It will affect the view.

    At the same time,if you want to open the page on mobile devices,you could only use col-xs and col-sm.These are fit small screen.

    More details,you could refer to below codes:

    <%@ Master Language="VB" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    
    <script runat="server">
    
        Sub Page_Load()
    
        End Sub
    
    
    </script>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
    
    
    
    <!-- This code tell the device to adjust font size according to the device size -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    
    
    <!-- This code include the links for bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
    
    
    <!-- jQuery library -->
    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
           
    <!-- Latest compiled JavaScript -->
    <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 
         
        <title>Home Page Only</title>
        <link href="../CSS/Universal.css" rel="stylesheet" type="text/css" />
    
        <style type="text/css">
            .style5
            {
                width: 380px;
                }
            .style7
            {
                height: 52px;
            }
            .style17
            {
                width: 30px;
            }
            .style18
            {
                width: 641px;
            }
            .style20
            {
                width: 416px;
            }
            .style21
            {
                width: 99%;
                height: 59px;
            }
            .style23
            {}
            .fb-like
            {
                width: 85px;
            }
            .style24
            {
                width: 697px;
            }
            .style25
            {
                width: 796px;
            }
            .style26
            {
                width: 1088px;
            }
            .style27
            {
                width: 890px;
            }
            .style28
            {
                width: 762px;
            }
            .style29
            {
                width: 773px;
            }
            .style30
            {
                width: 99%;
            }
            .style31
            {
                width: 131px;
            }
            .style1
            {
                width: 1047px;
            }
        </style>
    
    </head>
    
    
    
    <body>
    
    
    
    
    
    
    
    
        <form id="form1" runat="server">
    
    
            <!-- *********************************-->
            <!-- Bootstrap grid line for the logo, loging, location, mail etc -->
            <!-- *********************************-->
            
               <div class="container">
     
                   <div class="row">  
    
                        <div class="col-xs-2 col-sm-2" >
                             <!-- Something go here  -->                                              
                        </div>
           
    	                <div class="col-xs-6 col-sm-6" >
                             <!-- Something go here -->
    	                </div>
    
                        <div class="col-xs-4 col-sm-4" >
                              <!-- Nothing go here for now -->
                        </div>
    	  
                 </div>
                   
    
    
    
    
    
            <!-- *********************************-->
            <!-- Bootstrap grid line for the main menu -->
            <!-- *********************************-->
        
            <div class="row">   
    
               <div class="col-xs-4 col-sm-4" >
                     <!-- Something go here  -->
               </div>
                   
               <div class="col-xs-4 col-sm-4" >
                    <!-- Nothing go here for now -->
               </div>
    
               <div class="col-xs-4 col-sm-4" >
                     <!-- Nothing go here for now -->
               </div> 
                
         </div>
    
    
    
    
    
    
    
            <!-- *********************************-->
            <!-- Code for horizontal line -->
            <!-- *********************************-->
            
               <div class="row"> 
                  <div class="col-xs-10 col-sm-10" >
                  <hr /> 
                  </div>
    
                  <div class="col-xs-2 col-sm-2" >
                     <!-- Nothing go here for now -->
                  </div> 
    
               </div>
          
    
    
    
    
    
    
    
    
            <!-- *********************************-->
            <!-- This is for the top Ad Rotator -->
            <!-- *********************************-->
    
    
             <div class="row ">  
               
                 <div class="col-xs-10 col-sm-10" >
                    <!-- Something go here  -->
                  </div>
                   
                  <div class="col-xs-2 col-sm-2" >
                     <!-- Nothing go here for now -->
                  </div> 
               
            </div>
    
      
    
    
    
    
    
    
    
    
            <!-- *********************************-->
            <!-- Code for horizontal line -->
            <!-- *********************************-->
        
               <div class="row"> 
                  <div class="col-xs-10 col-sm-10" >
                     <hr /> 
                  </div>
    
                  <div class="col-xs-2 col-sm-2" >
                     <!-- Nothing go here for now -->
                  </div> 
               </div>
          
    
            
    
    
            <!-- *********************************-->
            <!-- Code for the page columns -->
            <!-- *********************************-->
    
             <div class="row " >  
        
                 <!-- This is the first column and its content place holder -->
    
                 <div class="col-xs-4 col-sm-4 ColumnDesign">
                    <asp:contentplaceholder id="ContentPlaceHolder1"  runat="server"   >
                    </asp:contentplaceholder>
                 </div>
    
    
                 <!-- This is the second column, the code for the small ads and its content place holder -->
                 
                 <div class="col-xs-4 col-sm-4 ColumnDesign">
    
                     <!-- Something go here  -->
    
                     <asp:contentplaceholder id="ContentPlaceHolder4" runat="server">
                     </asp:contentplaceholder>
    
                </div>
                 
                  <!-- This is the third column -->
    
                 <div class="col-xs-4 col-sm-4 ColumnDesign">
                       <!-- Nothing go here for now -->
                 </div>
    
           </div>
    
    
    
    
     
            
            
            <!-- *********************************-->
            <!-- Code for horizontal line -->
            <!-- *********************************-->
        
               <div class="row"> 
                  <div class="col-xs-10 col-sm-10" >
                     <hr /> 
                  </div>
    
                  <div class="col-xs-2 col-sm-2" >
                     <!-- Nothing go here for now -->
                  </div> 
    
               </div>
        
             
    
    
    
    
    
            <!-- *********************************-->
            <!-- Code for end of the page -->
            <!-- *********************************-->
            
            <div class="row "> 
    
                  <div class="col-xs-1 col-sm-1" >
                      <!-- Something go here  -->
                  </div>
         
    
                  <div class="col-xs-1 col-sm-1" >
                      <!-- Something go here  -->
                  </div>
         
    
                  <div class="col-xs-1 col-sm-1" >
                      <!-- Something go here  -->
                  </div>
    
    
                  <div class="col-xs-1 col-sm-1" >
                      <!-- Something go here  -->
                  </div>
    
    
                  <div class="col-xs-1 col-sm-1" >
                      <!-- Something go here  -->
                  </div>
    
    
                  <div class="col-xs-1 col-sm-1" >
                      <!-- Something go here  -->
                  </div>
    
                  <div class="col-xs-6 col-sm-6" >
                      <!-- Nothing go here for now -->
                  </div>
    
           </div>
        
    
                         
           <br />
        
    
    
            <div class="row "> 
    
              <div class="col-xs-2 col-sm-2" >
                  <!-- Something go here  -->
              </div>  
    
              <div class="col-xs-2 col-sm-2" >
                 <!-- Something go here  -->
    	      </div>
                           
              <div class="col-xs-2 col-sm-2" >
                <!-- Something go here  -->
              </div>
               
              <div class="col-xs-6 col-sm-6" >
                 <!-- Nothing go here for now -->
              </div>   
                
           </div>
        
        
       
          <br />
          
    
            
          <div class="row ">
              <div class="col-xs-4 col-sm-4" >
                 <!-- Something go here  -->
              </div> 
              <div class="col-xs-8 col-sm-8" >
                <!-- Nothing go here for now -->
              </div>
          </div> 
        
    
    
          <div class="row ">
              <div class="col-xs-6 col-sm-6" >
               <!-- Something go here  -->
              </div> 
              <div class="col-xs-6 col-sm-6" >
                <!-- Nothing go here for now -->
              </div>
          </div>   
        
    
    
       </div>  <!-- This tag close the container class declare at the very top -->
    
                <br />
                <br />
                <br />
                   
        </form>
            
    </body>
    
    </html>

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 24, 2020 10:41 AM
  • User426001450 posted

    Ok guys, I read your suggestions and I’ve tried everything. After putting everything in place and after testing, I’ve found that there is not a ‘one hat fits all’ in the business of designing for all devices with bootstrap. In my case and since I’m coding specially for large screens it is better something like: <div class="col-lg-4" > or whatever the number of columns may be. When the page is open in small devices it will response and adjust automatically to that screen. You don’t have to add something like: <div class="col-xs-4 col-sm-4" >  

    On the other hand if you are designing specially for small devices something like: <div class="col-xs-4 col-sm-4" > may be better in your case and hopefully it will be responsive in large devices. But all come down to try, testing and viewing your result.  

    I cannot believe that the only one that understood my instructions and highlighted in red and green was ‘yij sun’, so even though I do thanks you all for your help, I’m marking yij sun’s response as the answer. Thanks to you all again.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 26, 2020 6:16 AM