Mobil cihazlarda% 100 görüntü genişliği ile ilgili sorunlar mı var?

Question

Mobil sayfalarımın 2 tanesi tam% 100 genişliğe gitmiyor, here numaralı telefonu görebiliyorsunuz.

Kodumda <meta name="viewport" content="width=device-width" /> var ve bunun çeşitli varyasyonlarını denedim. Geri kalan sayfalar özel şablonlar olduğundan, sorun pages.php dosyamda olabilir mi?

<?php 
/** 
* The template for displaying all pages. 
* 
* This is the template that displays all pages by default. 
* Please note that this is the WordPress construct of pages 
* and that other 'pages' on your WordPress site will use a 
* different template. 
* 
*/ 

get_header(); ?> 

<div id="primary" class="content-area"> 
    <div id="content" class="site-content" role="main"> 
     <?php while (have_posts()) : the_post(); ?> 

     <?php get_template_part('content'); ?> 

     <?php endwhile; // end of the loop. ?> 
    </div><!-- #content .site-content --> 
</div> 

<?php get_footer(); ?> 

CSS: Ben wordpress ilgili veya kodumu berbat bulunuyor şey eksik

#content { 
    margin: 0 auto; 
    max-width: 51em; 
    background: none; 
    float: none; 
    margin: 0 auto; 
    padding: 0; 
} 

#primary { 
    width: 100%; 
} 

Bilmiyorum (I

İşte page.php benim kod Ben kodlamada yeni başlayan biriyim, ya da ne. Diğer sayfalarm düzgün çalıştığı için kafası karıştı ve kodda o ince genişliğe neden olan hiçbir şey göremiyorum.

* btw - mobil cihazda henüz nav'ı anlamadı, ancak bağlantının diğer sayfalarda çalıştığını görebilirsiniz: Home.

Answer 1

Her şey doğrudur ama footer bazı non-responsive kodları var çünkü scroll bkz. Bu sayfadaki

: ardından

#footer-container { 
    width: 100%; 
    margin: 0 auto; 
    padding: 30px; 
    box-sizing: border-box; 
} 

için width: 100% ayarlayın:

http://melmencarelli.com/about/

ilk #footer-container için box-sizing: border-box; ekleyip böyle width: 100% set Böyle: Bu sayfadaki

.footer-info { 
    float: left; 
    width: 100%; 
    margin-bottom: 25px; 
} 

---

:

@media only screen and (max-width: 1023px) and (min-width: 0px) 
@media only screen and (max-width: 1023px) and (min-width: 0px) 
@media only screen and (max-width: 500px) and (min-width: 0px) 
html input[type="button"] { 
    font-size: 14px; 
    padding: 20px 20px; 
    width: 100%; 
} 

:

http://melmencarelli.com/

talimatı üzerine Do sonra için width: 100% set

da bunu gördüm:

<div class="home-button"> 
<a href="http://melmencarelli.com/mentoring/"> 
<input type="button" value="HOW WE WORK TOGETHER"> 
</a> 
</div> 

Bunu kullanmak önerilir:

<div class="home-button"> 
<a href="http://melmencarelli.com/mentoring/"> 
<button>HOW WE WORK TOGETHER</button> 
</a> 
</div> 

sıra, tüm iyi görünüyor!