My blog template is not working correctly on mobile.Please help!


My blog template is responsive and works on mobiles and other platforms. But neither my sidebar widgets are displayed nor whole of menu bar is displayed.My blog on mobile (IPhone 5) Screenshot:

Please help.


@usamafayyaz you cannot show sidebar and the whole of menu in mobiles because it will not work as responsive any more.


@HassanTahir But I think sidebar widgets can be integrated in blogger after blog post as done in mobile version of . So i want the same thing in my blog.


Hello @usamafayyaz i have solution for you i also use it.

First go to blogger 》template 》click on mobile button and then select show destop template.

Now all the widgets will also show in mobile. :slight_smile:


@ngtechzone But I want my blog’s custom template to show the widgets not blogger’s default template.


You want to enable sidebar on small devices?


@Shivansh No i don’t want sidebar on small devices but I want the widgets of sidebar to be displayed on my blog.


You can easily show it below main-wrapper. Just remove .sidebar-wrapper { display: none; } from the media queries screen sizes in which you want to show that widget. It will automatically show below your blog’s main wrapper.


@Shivansh And how can I display my whole menu bar ?


But if you will display your whole menu bar in small devices, it will get messed up. :frowning:


@Shivansh So can I display the menu as the way it is displayed in mobile version of


Yes. Some time ago, MBT published how to create that type menu bar for mobile devices. You can go and search it through the Google Custom Search box. :smile:


@Shivansh As you instructed I have removed

.sidebar-wrapper { display: none; }

Now my all sidebar widgets are shown but they are not displayed correctly in mobile view where as in tablets ( Google nexus etc) the widgets are displayed in a proper way.Please help to repair my template’s mobile version. Look here:


Its easy. Just add below CSS in your template:

@media screen and (max-height: 1060px) 
width: 100%

And see if it work :smile:


@Shivansh At which place should I add this code in my blog???


above ]]></b:skin>. Go to your blog’s HTML and search for it.


No it is not working Shivansh.Please help!!!


Oh sorry. I mistakenly written height in place of width. Try this code:

@media screen and (max-width: 1060px) 
width: 100%


@Shivansh Not working again dude !!!


Search for this code@usamafayyaz

 @media only screen and (min-width: 480px) and (max-width: 768px)