I have just created a selector for a padding value just for phone devices on the homepage of my website. But it does not affect other pages or posts of the site. How can I set this globally?
This is the code Microthemer generated in the micro-themer folder in the active.css file after creating the selector and set padding on top to 500:
Could you post a link to your site please? I would need to look at the HTML of your site in order to advise you on this. If you could specify which other page you would like the selector to target that would help too.
The purpose of mentioned selector is when looking at the site on a smartphone the content of the top of a page is hidden under the responsive menu as this needs more space down the screen because of the narrow width. For the ‘shop’ page the selector I created works just fine but when you click i. e. on the icon ‘Editorial Shopping’ (just hover over the icons to find it) the top of the content is hidden under the menu when using a smartphone screen or just minimizing the desktop.
But I want this avoid on every content no matter pages, posts or custom post types.
I think it would be best to target the container element that holds the heading and all of the other main content. That way, it will work when the first heading is a h2, not just a h1, as is the case on your Editorial Shopping page.
You can target the container element using:
#layout-wrap
I determined this by inspecting your site with Chrome’s inspector.
You can edit your existing Mobile Selector by clicking it’s name in the top toolbar. Then replace div#content h1.page-title with #layout-wrap.
After fiddling around with various screen sizes both portrait and landscape, I realized that it is almost impossible to set all the necessary breakpoints and / or margin values to secure the content can be viewed always correctly.
Is there a global tweak that will assure that each page title and the following content will always be visible under the fixed menu bar on top?
In short, no. When a position value of fixed or absolute is applied to an element, it is taken out of the ‘normal flow of the document’. What this means is that the element doesn’t interact with other elements on the page.
Normally subsequent elements follow at the bottom or right of preceding elements. They acknowledge the space taken up by the preceding elements. But the space taken up by positioned elements is not acknowledged by other elements. And so you have to fiddle around with setting awkward top margins for different screen sizes. If this becomes unmanageable, as seems to be the case with your icon menu, you may need to completely rethink your method.
thanks for this complete information. I needed this security to motivate myself over and over again to find the best approach. It is almost impossible to do so if I would maintain a hope that there might be a smarter solution. Guess I will find the appropriate workaround.
.
.