How does zblog show/hide the sidebar module on the mobile end
Then a status bar will be displayed at the bottom of the page, click the left side“ mobile phone ”Icons, I don't know what they are Look at the picture:
Then the overall layout changes. Mm-hmm. This icon means to simulate the mobile phone, and then on the right side, click“ Three points ”, and then click the icon on the far right "Do not understand the picture:
The page changes again to vertical screen, and the pixel size can be adjusted at the top, as shown in the figure:
Some websites may be opened“ Shield F12 ”The function of Developer Mode (Check, review the names of elements, etc.), unable to view specific elements, teach you a method, open Baidu , follow the above steps, and then click the website to change to a website with blocked developer mode. So, those who always like to block F12, really don't understand the meaning; The code of chicken ribs has no effect at all. The next step is the preparation before, and the next step is the focus. First, we slide the page to the bottom, then click the mouse icon as shown in the figure, and then slide the page at will, and the corresponding module code will be displayed on the right side, such as the topic DIV module in the figure. Because the topic template has hidden the sidebar, the specific element value cannot be found, and then we can view other modules under the topic module.
Slide the mouse over the module on the right, and the corresponding module will be displayed on the left, as shown in the figure:
From here, we should know which sidebar is“ side fr ”This DIV can always be found when you look for it slowly. The name of the side bar is generally the sidebar. Just find it directly, and then check the code: as shown in the figure, the side module is hidden when the screen pixel is less than 999px, as shown in the figure:
At this time, we click the plus sign on the right to automatically create a new css, as shown in the figure:
Click the space between curly braces {} and enter the code:“ display: block; ”Then the sidebar we need is displayed.
After we know the div class alias, we copy the code in the red box on the right, log in to the website background, set the theme, find the custom css interface reserved for the theme (if not, we can only modify it in the style sheet), and paste the code:
.side.fr {display:block; }
This is not enough, because we just saw that the code was hidden first on the mobile phone, so we need to add screen size to the code:
@media screen and (max-width:999px){ .side.fr {display:block;} }
We need to change 999px to a suitable size. It is recommended that the size be smaller because the screen is too wide and the side bar display is unfriendly and ugly. It is recommended to change it to 560px , which means that the sidebar is hidden between 999px-561px and the sidebar module is displayed below 560px. Then click Turn on custom css Click the Save button at the bottom to refresh the foreground to see if it is displayed. This is the display module course To hide, it is also simple. First, determine the size of the mobile terminal screen pixels, such as less than 999px. Then the hidden code is:
@media screen and (max-width:999px){ .side.fr {display:none!important; } }
Put“ block ”Replace with“ none ”, why add one ! important , which means priority display.
