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


#1

Assalam-O-Alaikum!!!
My blog http://technologyhunterzz.blogspot.com/ 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) http://mobiletest.me/iphone_5_emulator/#u=http://technologyhunterzz.blogspot.com/ Screenshot:


Please help.


#2

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


#3

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


#4

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:


#5

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


#6

You want to enable sidebar on small devices?


#7

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


#8

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.


#9

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


#10

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


#11

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


#12

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:


#13

@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: http://mobiletest.me/htc_one_emulator/#u=http://technologyhunterzz.blogspot.com/


#14

Its easy. Just add below CSS in your template:

@media screen and (max-height: 1060px) 
.sidebar-wrapper{
width: 100%
}

And see if it work :smile:


#15

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


#16

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


#17

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


#18

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

@media screen and (max-width: 1060px) 
.sidebar-wrapper{
width: 100%
}

#19

@Shivansh Not working again dude !!!


#20

Search for this code@usamafayyaz

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