Archived topic
class name or css required
5 replies · Started by Anil on May 17, 2020
Hi
I would like to have a better control over a div that I placed after header.
For this I am using "grid-container" and a "custom class".
I want some standard class of the theme that should follow global "Separating Space" and "Padding" as per theme customised so that I can avoid changing css of custom class everytime if I change something of these 2 parameters.
Following is custom class css
@media(max-width: 768px) {
.custom_class{margin:4px auto 0 auto; padding:20px; background:#fff; text-align:center}
}
@media(min-width: 769px) {
.custom_class{margin:20px auto 0 auto;padding:20px 0; background:#fff; text-align:center}
}
Please advise ...
Best regards.
Hi there,
The theme CSS targets specific elements for the separating space which also has other properties, so I don't think it would be possible to share those classes in this case, unfortunately.
Ooo Tom.
Would .page-header class be a better choice in this case ???
Hi there,
the closest i think you could get is to use the widget-area markup like this:
<div class="widget-area custom-area-class">
<div class="widget custom-widget-class">
Advert script here
</div>
</div>This would attract the Widget Padding from the customizer
Then add it to the inside_container hook. Which would keep it constrained to the grid area.
You would still have to add margin-top to the area-class and a background color to the widget-class
Thanks David, I am feeling this would be a better option to have global separating space and padding.
Well, you may plan in future release to have some css for a custom div area which should obey separating space and padding as set in customizer.
Thanks for all help.
Best regards.
You're welcome
