Mobile view Problem

How did you solve it?

Well, I’ve added so much of CSS which I’m not even sure of, So I’ve deleted one and checked the same… until I found where the problem code was and tried to remove it but then my site in desktop view has so much space between the title and content. now it looks ok I’m fine with it after tweaking around and entering new CSS from someplace else. ill post it below, You can go through with it.

aside.widget-area {
margin-top: -100px;
}

.custom-logo-link {
display: inline-block;
float: left;
}

.site-header {
padding-top: 20px;
}
#masthead {
padding: ;
}

#masthead {
padding-bottom: 12px !important;
}

The first CSS was for reducing empty spaces in the footer widget area.
The second CSS was for the logo moving it upwards toward the top screen( i think)
The third CSS was where the problem has been identified, If I put ‘zero’ in below CSS
then my mobile view gets screwed up. so I removed zero from it. #masthead {
padding: 0;
}
The fourth one did the trick. well everything was needed for my website to look ok.

Thanks for sharing. I will play with the code a bit as well.

Your welcome. If you wait until your Blog is ‘perfect’, you will wait forever.
Your Blog is an ongoing work in progress. so if it’s workable and looks pleasant go with it. slowly learn and introduce new changes to your website. Even popular websites still do make changes and tweak around every once in a while.