How do I make my WordPress website mobile responsive?

Making a WordPress website mobile responsive is not difficult. However, we need to keep a few things in mind.

Moreover, we must follow some steps.

Firstly, we don’t have to bother about this issue, if we have a responsive theme.

Secondly, we must take steps when we create our own theme. And finally, when we work with a bootstrap theme, in some cases we must adhere to some rules that make our WordPress website mobile responsive.

Well, before we start let me give you a glimpse of my Bengali blog that I have created with the help of a bootstrap theme.

However, while building this website I faced some challenges.

Therefore, as I progress, I need to solve those problems one after another.

Why is my WordPress site Not responsive?

Most importantly that question really bothers.

And it had started bothering me as well when I found that in mobile the front page images are not displayed properly.

Subsequently, I checked my header PHP file and found there were more than one CSS files that by default comes with the bootstrap theme.

<!-- plugin css for this page -->
<link
rel="stylesheet"
href="<?php bloginfo( 'template_url' ); ?>/vendors/mdi/css/materialdesignicons.min.css"
/>
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/vendors/aos/dist/aos.css/aos.css" />
<link
rel="stylesheet"
href="<?php bloginfo( 'template_url' ); ?>/vendors/owl.carousel/dist/assets/owl.carousel.min.css"
/>
<link
rel="stylesheet"
href="<?php bloginfo( 'template_url' ); ?>/vendors/owl.carousel/dist/assets/owl.theme.default.min.css"
/>
<!-- End plugin css for this page -->
<link rel="shortcut icon" href="<?php bloginfo( 'template_url' ); ?>/images/favicon.png" />
<!-- inject:css -->
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/css/bootstrap.css">
<!-- endinject -->

It was not possible to check all those CSS files and found from where the problem raised its head.

Moreover, I need a quick solution.

What to do?

Above all, I must override the CSS files.

To shake off this problem, I added an extra style at the header PHP file like this:

<style>

.illustration {
width: 100%;
}

.page {
display: flex;
flex-wrap: wrap;
}

.section {
width: 100%;
height: 500px;
padding-bottom: 1rem;
margin-top: -1px;
display: flex;
justify-content: center;
align-items: center;

</style>

Mainly the images gave more trouble. To fix that, I added this extra class to each image at the front page PHP file.

<img class="illustration"

alt="bengali-news"src="<?phpif ( has_post_thumbnail() ) { the_post_thumbnail( 'medium' ); } ?>"/>

It solved one problem.

How do I fix WordPress responsive?

On the other hand, there was the single post page.

It was not mobile responsive.

The image was taking extra space.

To solve that we can use an extra division class.

I did that.

<div class="page section">

<?php
if ( has_post_thumbnail() ) { 
the_post_thumbnail( 'full' );
}
?>

</div>

Because of this tweak it solved the problem.

To sum up, we can do anything we like to do. However, WordPress allows us to solve the problem individually.

That’s really great.

What Next?

Leanpub books
Written six books for Apress
Amazon books
GitHub repository
Technical blog
Blog on anything that comes to mind!
Twitter