How can I set a created selector globally? [only works per page]

This topic contains 9 replies, has 2 voices, and was last updated by  yauser 6 years, 8 months ago.

Author Posts

yauser

Hi,

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:

/*** Microthemer Styles ***/

/* =Body
————————————————————– */
/* Mobile Selector */
div#content h1.page-title {
}

/* Phone
************************************************************************/
@media (max-width: 480px) {

/* =Body
————————————————————– */
/* Mobile Selector */
div#content h1.page-title {
margin-top: 500px !important;
}
}

Thanks for any help.

Rod


yauser

I am sorry, it is ‘marging’ not padding of course. But the issue remains the same.


Sebastian

Hi Rod,

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.

Cheers!
Sebastian


yauser

Hi Sebastian,

the site is still in test mode. However I guess you can see what you need. This is the link:

https://test.roadmapstores.com

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.

Thanks

Rod


Sebastian

Hi Rod,

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.

content pushed down

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.

I hope that helps!

Sebastian


yauser

Hi Sebastian,

great advice. Works perfect.

Thanks a lot for your most valuable support. Have learnt another CSS tweak.

Rod


Sebastian

Great!


yauser

Sebastian,

I have an additional question to this topic.

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?

Thanks

Rod


Sebastian

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.

Cheers,
Sebastian


yauser

Hi Sebastian,

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.

Thanks again. Case solved.

Rod

You must login or register to reply to this topic.