How do I customize Widget styles in Blogger Mobile View?


#1

In the mobile view I have the widgets setup to show. Widget titles and their contents are completely butted up to the left side with no spacing/padding. How do I add about 5-10px of padding to this?

Desktop - http://infernalwriting.blogspot.com/

Movie - http://infernalwriting.blogspot.com/?m=1

Thanks for you time, Steve


#2

To edit the stylesheet of widgets when the mobile view is active, make the following changes to your Mobile CSS

  1. Go To Blogger > Backup your template

  2. Click Edit HTML

  3. Search for this CSS class

.mobile .widget ul {
margin:0;
padding:0 0 0 0px;
list-style-type:none;
}
  1. Replace it with this custom styles:
.mobile .widget ul {
    margin:0;
    padding:0 0 0 10px;
    list-style-type:none;
    }

.mobile .footer-inner .widget h2, .mobile .sidebar .widget h2 {
padding-left: 10px;
}
  1. Save your template and you are all done! :smile:

The above code will add a padding of 10px to the left side of both the widget h2 headline tags and the Footer menu link list


#3

Mohammad,

Thanks for the CSS info much appreciated. The CSS works as posted here with not issues, however it only answers the question 50%.

I have tried looking around otherwise and messing with the CSS supplied first but cannot seem to get the content within the widget to pad left as well. The widget headers/titles are padding just fine as indicated yet I can not see how to pad the content over as well.

Thanks Steve


#4

Misread the contents part , will post that too when I am online via desktop


#5

Something has gone wrong and I can not find what the issue is to resolve it.

For some reason, something I did really trashed by template. I have rebuilt it completely from scratch, being very careful and watchful so it did not happen again. Long story short I am back to where it was with two minor issues.

1.) The previous 50% from the initial question still remains.

2.) When I look at the site in desktop Firefox and desktop Firefox mobile view, it generally looks okay - http://www.infernalwriting.com/?m=1. When I look at the mobile site on my Android, it does not look correct. Here is a screenshot from my Android.

If anyone has any thoughts on how to fix this it would be awesomely appreciated.

Thanks, Steve


#6

.mobile .widget ul { margin:0; padding:0 0 0 10px; list-style-type:none; }

.mobile .footer-inner .widget h2, .mobile .sidebar .widget h2 { padding-left: 10px; }

I have no idea about this. thanks for the tip bro.


Facing serious problems in customizing my blogger template
#7

Hi @InfernalWriting,

you may always backup your template before editing it and that is one thing I strongly recommend. This is the only way to restore the template in case of a sudden mishap. Right now if you have no original copy saved as a backup then you will need to add styles from scratch.

As far as the design conflict in android is concerned, kindly activate the mobile view so that I can see where you went wrong. At present you have deactivated the mobile option

For adding padding to the content part do this:

  1. Go To Blogger > Backup your template

  2. Click Edit HTML

  3. Search for this CSS class

.mobile .widget ul

  1. Just above it paste the following:

.mobile .widget-content { padding: 10px; }


#8

Mohammad,

Thanks again for the info.

1.) This CSS fixed the padding issue

2.) I feel like a complete n00b… I think it was an issue with my Android. After clearing cache and reloading, it displays fine at the moment.

Thanks, Steve


#9

You are always welcomed infernal. Feel free to ask more questions by opening new topics