Arpit Gupta Arpit Gupta - 5 months ago 13
CSS Question

How to add Responsive.css in Custom Wordpress Theme

I am new to wordpress. I have created a wordpress theme which has

style.css
,
header.php
and
index.php
and
footer.php
. Now I want to make my
index.php
page responsive because after resizing of browser window layout of index.php went horrible(doesn't view properly on mobile and other handle held devices).

I want to make index.php responsive with the help of
@media
query or bootstrap.

Please suggest how i can make index.php a responsive page?

Answer

You need to register your responsive.css sheet using the wp_enqueue_style() function inside your functions.php file inside your theme folder. If you don't have this file, just create it :

<?php

// Enqueue your files
function theme_enqueue_styles() {
    // If the current page is the homepage, then load the responsive.css file
    if(is_home()) {
        wp_enqueue_style( 'responsive', get_stylesheet_directory_uri() . '/css/responsive.css' );
    }
}

// Add action
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 15 );

Then you need to create your theme/css/responsive.css file and write you media queries and styles.

Hope this helps !