So, I have to Carefully analyze and make the discernment. For this I need to recall all, if I have the free then only it is possible.
Problem and Solution | Simple Easy Mobile Responsive Multi-level Drop Down Menu with CSS
Problem 1: The menu is not properly appearing on the mobile, Desktop it is working well.Solution: I tried the same web template on the mobile, but it is not working. Finally, I have found a solution through following queries on google - “How to run script only on mobile”.using this I try to narrow down the issue. without this through the normal template, I am unable to bring the menu on the mobile
Time Spent: 3 Hours
Mobile Menu Javascript Link
https://www.mybloggerlab.com/2014/08/how-to-easily-add-mobile-responsive-menu-in-blogger.html
Problem 2: Google Quires - “How to run script only on mobile”. I got a lot of answers
Solution: I have tried 3 pages, out of 3 only 2 pages are not working, I have tried the final site
https://www.mybloggerlab.com/2014/08/how-to-easily-add-mobile-responsive-menu-in-blogger.html This is also, it is not working easily. After I have read the full post and implement the javascript, I am able to see the menu on the mobile.
Time spent: 3 Hours
Mobile Menu to bring into the left - Great Challenge. .
Solution: use float: left and margin:0 100px; it will bring the content into the left.
1)margin span : exactly set the menu item left or else it will display center
Use
{ float: left and margin:0 100px; }
it will bring the content into the left.
Find the mobile development SDK which part I have to change the code.
I have used a mobile browser emulator(Google Chrome Addon), However, it does not display some of the elements that I have used, Better to use Google mobile-friendly test is good.
Problem 3: Able to see the menu, But not able to see the submenu
Reason: All the menu appear center of the screen
Solution: first 45 minutes to 1 hour, I thought it was simple stuff. I can solve it. But it took a long time, so I approached this problem in a systematic way. I try to understand the code and then customize according.
Some of the Code which I have edited
1)nav#nav-mobile li:last-child {
It will bring only the last item left.
Problem 3) Solution
The same way I have to write code for
nav#nav-mobile li{
Float: left;
Margin: 0 100px;
}
Time spent : 3 hours
Mobile Drop Down Menu to bring into the left - Great Challenge.
Solution: use float: left and margin:0 100px; it will bring the content into the left.1)margin span : exactly set the menu item left or else it will display center
Use
{ float: left and margin:0 100px; }
it will bring the content into the left.
Find the mobile development SDK which part I have to change the code.
I have used a mobile browser emulator(Google Chrome Addon), However, it does not display some of the elements that I have used, Better to use Google mobile-friendly test is good.
What I have learnt
1)normal html all the tags attributes(codes) are written directly. But on the xml they maintain css code or css file, which will help about all the require tag <body> <a> <ul> <li> (.section, .widget, .widget ul) their attribute like color,background margin,float,border written on css.CSS saves a lot of work.
Example CSS syntax
H1 { color:blue; font-size;12px; }
Good Problem Solving
When you are trying to solve the problem every step is important. Don't try inaccurate steps which took a long time to come back. Even if you are going slower, go on the right path. Some time the problem looks small, if I am not properly handled, it will take a long time and affect health too. So every problem I have to approach in a systematic way. But there are no guidelines like I have to do this or don’t do this. If we have confidence this solution will work, we can try one or two times else we have to approach in a systematic way.Example: Blogger is having template design, SEO every time we make any small changes it will affect the SEO. So always keep in mind to try to write the code in lightweight without affecting SEO.
This may help you.
While Writing Coding (or) Troubleshooting What are the most of the programmer's coding error
1)Do the spelling mistake, syntax error, and not read the word carefully. Because every character is important in programming.2)50 to 70% of time programmers will make mistakes initially, But we assume there may be problems with the system or other interface. But actually, the problem lies when developers write the code.
Note: So you have to react slowly for all the operations you are doing on the coding part or else it will become a mess.
Firefox inspect element with blogger xml
If you want to write better XML code you can compare firefox inspect elements with blogger XML. You can find each and every event, style and variable1)CSS class id and other attributes
what is a widget (name) and (showaddelement)
2)A tag showing red color(if I am not properly close the tag) - Blogger tab
3)CSS style will come before }}]]></b:skin> which we have added into the blogger template Theme->customize->advanced -> add CSS code
4)Javascript will come before <head> tag
0 Comments