Mobile site is left aligned

It’s a bit hard to debug but:

Your site title h1 has a fixed width of 400px. This “pushes” to the right, that is why your site seems to be left aligned.

.site-title {
	width:400px;
	margin: 0 auto;
	font-size: 30px;
	font-size: 3rem;
	font-family: Oswald, Arial, Helvetica, sans-serif;
	text-transform: Uppercase;
	line-height: 1em;
	}

Setting the width to:

.site-title {
	width:100%;
	}

should do the job.

You need to fix this width by either adding custom css through a plugin or creating a child theme and adding the fix to the child theme.

Thanks for the reply. I have to paste the last code only i.e.
.site-title {
width:100%;
}
right?
I have pasted this code in custom css of child theme but nothing happened. Moreover, its not clear why there is more space on the right side of the body of the blog as compared to the left side?

Hi,

Because the title has a fixed width of 400px and when the screenwidth is less than 400px wide it ‘pushes’ to the right.

imagine standing in a doorway with your arms spread out, thats how the title is pushing against the “doorway” of your mobile device.

The reason your mobile view is not fixed yet is because the width of .site-title is defined is more than one place in your child theme css. You need to replace it everywhere the width of your site-title is defined as 400px.

Hi. It works for me. Now my mobile site is also perfectly aligned. Thanks a lot Mike for your prompt help. Thanks again!!