dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: Site in desktop very good, but in mobile very small.

  1. #1
    Join Date
    Dec 2015
    Posts
    1

    Exclamation Site in desktop very good, but in mobile very small.

    Hey guys, I'm making a website for dissemination with a logo, one spritezinho and a small text with a message.

    When you access it from the desktop, resolution, size, alignment, all OK! But when accessing the cell, everything went extremely small size. How to solve it?

    Website (If possible, access the cell to understand):

    http://agoravai2.esy.es/

    HTML Code:
    <div class="block">
        <div class="centered">
          <img src="img/logo.jpg" id="img_logo">
        
          
          <div class="contato">
           <ul>
              <li><a href="#" target="_blank" class="img_sprite1"></a></li>
                <li><a href="#" target="_blank" class="img_sprite2"></a></li>
                <li><a href="#" target="_blank" class="img_sprite3"></a></li>
              </ul>
           </div> 
    
        <p> <a style="font-size:20px;"> email</a> <br><br> texto<br>  </p>
    
        </div>
    
        
    
    
    </div>
    CSS:

    Code:
    body, html {
    	height:100%;
    	padding:0;
    	margin:0;
      background: #181A1B;
    }
    
     p {
      font-family: 'Open Sans Condensed', san-serif;
      font-size: 12px;
      color: #C5C5C7;
      line-height: 14px;
      margin-top: 30px;
    }
    
    .block {
      height: 100%;
      text-align: center;
      background: #181A1B;
    
    }
    
    .block:before {
      content: '';
      display: inline-block;
      height: 100%; 
      vertical-align: middle;
      background: #181A1B;
      
    }
    
    .centered {
      display: inline-block;
      vertical-align: middle;
      /*width: 100%; */
      max-width: 500px;
      background: #181A1B;
        
     
    }
    
    
    .contato ul{
      list-style: none;
      margin-top: 20px;
    }
    
    .contato ul li{
      margin-right: 10px;
      display: inline; 
    }
    
    .contato ul li a{
      display: inline-block;  
    }
    
    
    .img_sprite1 {
    
      width: 40px;
      height: 38px;
      
      background-image: url('../img/sprite5.png');
      background-repeat: no-repeat;
      transition: 0.5s;
    }
    
    .img_sprite1:hover{
    
      background-position: 0 -40px;
      transition: 0.2s;
    }
    
    
    .img_sprite2 {
    
      width: 40px;
      height: 38px;
     
      background-position: -49px 0;
      background-image: url('../img/sprite5.png');
      background-repeat: no-repeat;
      transition: 0.5s;
     
    }
    
    .img_sprite2:hover{
    
      background-position: -49px -40px;
      transition: 0.2s;
    }
    
    .img_sprite3 {
    
      width: 40px;
      height: 38px;
      
      background-position: -98px 0;
      background-image: url('../img/sprite5.png');
      background-repeat: no-repeat;
      transition: 0.5s;
    }
    
    .img_sprite3:hover{
    
      background-position: -98px -40px;
      transition: 0.2s;
    }

  2. #2
    Join Date
    Mar 2012
    Posts
    3,213
    Hi and welcome to the site

    What you describe is the default behavior for classic PC-style web sites when displayed on mobiles. There is a meta command "viewport" which can override this, but it should not be used without redesigning the page to be responsive.

  3. #3
    Join Date
    Jun 2015
    Location
    NSW,Australia
    Posts
    18
    It’s easy to use Bootstrap technology to make your website responsive. Its mobile first technology which use to design website mobile friendly.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    3,589
    You produce a CSS sheet for different portal sizes. Not all smart phones are created equally and not all web browsers in them will render the same. On my smartphone a normal site renders nicely whereas the same site on opera for smart phones renders in a size so small it need zomming in and when forced in to mobile sites it renders awful.

    So simpler to ask the user if they want to continue to use the site or switch...
    --> JavaScript Frameworks like JQuery, Angular, Node <-- ... and please remember to wrap any code you have in forum tags:-
    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Nov 2015
    Posts
    5
    for the css dont use px use percentages instead so it responds to the different sized will look very nice if done well

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles