CODEWITHSUNDEEP
csswordpressresponsivew3.css
csandreas1
csandreas1

Reputation: 2378

Making wordpress template mobile friendly

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 -->

Upvotes: 0

Views: 139

Answers (1)

Paul
Paul

Reputation: 1422

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();

Upvotes: 1

Related Questions