Minor amendments on mobile view


I have a couple of little questions. My focus is on having the site mobile focused from the outset, so no bother at all with the web. I need the header area “tightened” up a lot - so a lot neater and tighter. I have linked below to a screenshot that I like https://flic.kr/p/DeiMpA can you advise?
The site that I’m using Perth Pro with is this one here http://kiswahili.tutaabsoluta.net. If theres anyway you can help me to move the search box so it is above the logo… can you do that?

Many many thanks!


I just checking your site and I think to make the header tighter is by removing the grey space below the header http://prntscr.com/9rxu17
And here is the css code to remove the grey space:

@media only screen and (max-width: 991px) {
  .site-content {
    margin: 0;

You can use simple custom css plugin to put the code in above, or you can using child theme also.

Then, to add search box in header, its better if you create a child theme before modifying the existing code. Let me know if you ready with the child theme.

Thanks - is there any way to add code to it to make this happen, or would it have to be a child theme? I think I’m ready with that one though, anyway!

Hi, You can use simple custom css plugin, you can download it from here https://wordpress.org/plugins/simple-custom-css/installation/

After you install the plugin, you can go to appearance > custom css > then put the css code in above.