0

I have created a custom page-template with child theme of Official WordPress twenty-seventeen theme.

However i have problem on mobile devices, the pages are not mobile friendly and i get the popup from chrome to make the page mobile friendly and indeed the content is not readable at all on mobile devices.

I am trying make it friendly using W3.css framework, how can i do the content mobile friendly with w3.css or just some css or any other library? Below is the code of the template. Here it is the template-page i use and is not mobile friendly.

   <?php
/**
 * Template Name: More info template
 *
 * Description: A custom template for displaying a fullwidth layout with no sidebar.
 *
 * @package Twenty Seventeen Child
 */
?>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div style="padding:5px;" class="wrap">
    <div id="primary" class="content-area">
        <main id="main info-template"  class="site-main w3-padding" role="main">
            <?php
            while ( have_posts() ) : the_post();
                get_template_part( 'template-parts/page/content', 'page' );
                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;
            endwhile; // End of the loop.
            ?>

        </main><!-- #main -->
    </div><!-- #primary -->
</div><!-- .wrap -->
csandreas1
  • 2,026
  • 1
  • 26
  • 48
  • You should copy an existing template from the theme as a starting point, where is your get_header(); get_footer(); etc. ? – Paul Nov 24 '17 at 12:52
  • I don't need for this template @Paul – csandreas1 Nov 24 '17 at 12:52
  • If you are using wordpress you need a lot of what's going on in the header and footer wp_head(); & wp_footer(); are essential you also need your and tags if you don't need the html elements in your header and footer then I'd advise you to create a separate header/footer for this template or at least include these essentials to your template. – Paul Nov 24 '17 at 12:58
  • Yes you are right, if i add the header and footer i get a friendly page, but i want the template without them and full width. – csandreas1 Nov 24 '17 at 13:05
  • Added an answer. – Paul Nov 24 '17 at 13:09
  • @Paul thanks but it needs some edit, leave some spaces and maybe add some bolds. – csandreas1 Nov 24 '17 at 13:10

1 Answers1

1

Either create another header and footer specifically for this template so header-new.php and call with:

get_header('new');

or else copy the content of the header.php and footer.php into the top and bottom of your template and remove the html elements that you don't need.

The following tags should NOT be ignored in a template:

<head> <html> wp_head(); and wp_footer();

Paul
  • 1,412
  • 1
  • 9
  • 19
  • I was missing some important libraries and html code with some important css classes which are contained inside Header and footer, that i didn't include in my code – csandreas1 Nov 24 '17 at 13:57