-
Posts
-
Hello,
please, i’d like to edit a text element, where i put a mosaic. the mosaic is set to full width, yet the container ( the text element using a shortcode ID ) has a 50 px padding when i look at the page’s code with F12. And i’m not sure how to adress this element, and overwrite this padding value, with Quick css, so the container ( text ) uses the full width 100% of the page without margin/padding, and let the mosaic/gallery use the whole width as well.
i couldn’t find an answer about it yet.thanks for any help.
Hi yes9310,
Can you give us the link of the page mentioned? so we can inspect further.
Best regards,
NikkoHello, i’m not sure how, this page is offline for the moment, i can put it online only later.
but here’s a screenshot that shows what i mean, you can see the green margins on the right. and the Div container says that it’s using a 50 px padding ( on the sides and above, below the header ) , which i’d like to edit.
Thank you.Best regards
Hi yes9310,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
#top .container { padding: 0; }If you need further assistance please let us know.
Best regards,
VictoriaAlthough … it didn’t remove the margin/padding at the top ( the green area ) . i’m looking but i don’t see any values about it in the css with F12 :
Edit : i think i actualy found it, it’s “padding top : 50 px” . but i’m not sure of which element to name. Should i simply write
#top .container {
padding-top: 0;
}?
Hi yes9310,
Can you try adding this CSS code as well:
#after_submenu .content { padding-top: 0; }Best regards,
NikkoThanks very much Nikko ! it’s working !
More generally, how could i simply know which elements to adress ( here it’s “after_submenu” ) so i could edit the theme page template, instead of asking every time and probably bothering you ?
i feel blind about it, and i don’t know where you find these answers.thanks very much.
Hi yes9310,
The answer is actually in your screenshot :)
In here https://imgur.com/jO8CMzu I could see that the div that is wrapping the container (parent) is an ID of after_submenu and then when the content inside the container is revealed in this screenshot https://imgur.com/WuNeC5U it shows the class of content thus we could conclude that the selector you should use is #after_submenu .content. The only problem with this is it will affect other pages, to make it page specific you’ll need to inspect the body tag and check for the page-id-xx (xx is the page ID number) then you’ll need to change the selector to .page-id-xx #after_submenu .content
Let us know if you’ll need further information regarding this.Best regards,
NikkoThank you.
“In here https://imgur.com/jO8CMzu I could see that the div that is wrapping the container (parent) is an ID of after_submenu”
I can understand this, ok.“and then when the content inside the container is revealed in this screenshot https://imgur.com/WuNeC5U it shows the class of content thus we could conclude that the selector you should use is #after_submenu .content.”
Ok, but i see “template-page content” and not just “content”. So i don’t understand this one very well.
should write the “parent ( dot ) class name of the content ( which here is named “content” ) ” . Am i correct ?“The only problem with this is it will affect other pages, to make it page specific you’ll need to inspect the body tag and check for the page-id-xx (xx is the page ID number) then you’ll need to change the selector to .page-id-xx #after_submenu .content”
Ok. In this case i wanted to affect the global template to affect all the pages. Then … ok
Now about the page number, here :
it would mean that i should write “.page-id-2219#after_submenu .content” ? am i correct ?Also, about this :
what should i name, as it’s not a div, it’s above the header and body … and i’d just like to overwrite the padding to 0
And about this logo :should i call it “#inner-container . logo” ? so i could tell it to have a distance on the left from the side of the inner container.
One more thing, i could change the color values of the full width submenu element links, in “general styling”. but even when changing the fonts in “body”, in “advanced styling”, it didn’t change the fonts sizes of these links. i can’t locate it. it’s strange because i can still change their font family, normal/bold … but not the size.
Thanks for your help !
Hi,
Ok, but i see “template-page content” and not just “content”. So i don’t understand this one very well.
should write the “parent ( dot ) class name of the content ( which here is named “content” ) ” . Am i correct ?
Yes, there are more than one class shown in that div but you can just pick one (or more), for this example I just picked content.it would mean that i should write “.page-id-2219#after_submenu .content” ? am i correct ?
Almost, it should be .page-id-2219 #after_submenu .contentwhat should i name, as it’s not a div, it’s above the header and body … and i’d just like to overwrite the padding to 0 And about this logo :
It does not matter as long as you get the right class name or id, just make sure the selector is in the right order. Something like this, which is like above .page-id-2219 is the parent, #after_submenu the subparent and .content is the target element. should i call it “#inner-container . logo” ? so i could tell it to have a distance on the left from the side of the inner container.
No, since inner-container is a class, it should be .inner-container .logoOne more thing, i could change the color values of the full width submenu element links, in “general styling”. but even when changing the fonts in “body”, in “advanced styling”, it didn’t change the fonts sizes of these links. i can’t locate it. it’s strange because i can still change their font family, normal/bold … but not the size.
You can try to inspect that element and try to check if there are css conflicts that causes the issue.Best regards,
NikkoThank you Nikko.
what should i name, as it’s not a div, it’s above the header and body … and i’d just like to overwrite the padding to 0
“It does not matter as long as you get the right class name or id”
ok, so here, the class name would be “.html_av-framed-box” , am i correct ? I don’t see an ID . i tried it but it didn’t work with this class name
………… ………………… ……………………
should i call it “#inner-container . logo” ? so i could tell it to have a distance on the left from the side of the inner container.
No, since inner-container is a class, it should be .inner-container .logo
Ok, so a class should have a “.” in front of it, and a container or parent should have a “#” in front of it, and a page ID should have a “.” in front of it ? And a space between each ?
“#after_submenu the subparent” >>> hmm, i’m confused a bit about when i should put a “#” and when i should put a “.” then.
anyway, i tried :
.inner-container .logo {
padding: 0
}
and it worked :)………………… …………….. ……………………….
i should review my css a bit … but basicaly here, i see :
Div = wrap all, and it has a class name.
inside it, a header id, with a class name.
inside it, a div id = header main, with a class name
inside it, a div with no id , and a class name
inside it, a span with no id and a class name, about the logo.
so …. when to use a div ID, what to do when a Div has no ID … When to use a class name … i got confused a bit. Sorry about that.………………….. ………………………. ……………………..
Here for example, i used the css :.logo {
left: 20px;
}and it’s strange, the .logo shows both
left : 0
and left : 20px . the 20 px didn’t overwrite the 0.Hi yes9310,
I would suggest reading this article: https://css-tricks.com/the-difference-between-id-and-class/
Also this one so you will understand why some selectors are overridden by other selectors: https://css-tricks.com/specifics-on-css-specificity/ (this answers your last question)Best regards,
NikkoThank you Nikko, i’ll review it.
But for now i really can’t find the right id or class for this one :
it’s above th header and body divs. And the class is very long …. :
html_av-framed-box responsive av-preloader-enabled av-default-lightbox html_header_top html_logo_left html_main_nav_header html_menu_right html_custom html_header_sticky html_header_shrinking_disabled html_mobile_menu_phone html_header_searchicon_disabled html_content_align_center html_header_unstick_top_disabled html_header_stretch_disabled html_minimal_header html_elegant-blog html_av-submenu-hidden html_av-submenu-display-click html_av-overlay-side html_av-overlay-side-minimal html_av-submenu-clone html_entry_id_2000 html_av_admin_bar_active av-cookies-no-cookie-consent av-no-preview html_text_menu_active avia_desktop js_active avia_transform avia_transform3d avia_transform avia_transform3d avia-webkit avia-webkit-86 avia-chrome avia-chrome-86
i have no idea where to start. i’d just like to remove this extra 10 px margin / padding on the sides and top, in green. And it seems to be commanded by this html class, when i hover it in F12.
Hi yes9310,
There’s no ID for it, as for the class, just choose one or a few of them if you like.
You can use .responsive or if you’d like multiple, then you can do it like this: .responsive.js_active
But since you can simply use:html.html_av-framed-box { padding: 0; }Best regards,
NikkoThanks Nikko, i tried that code already before and it didn’t work. i tried again, to make sure, with your code, and it still didn’t.
maybe should i try each class one by one and see ? i don’t understand why it reacts this way.Hi yes9310,
You can add an additional weight to it, try this code instead:
html.html_av-framed-box.responsive { padding: 0; }If still it doesn’t work, then try this instead (this forces the property to have the highest priority, this is not recommended but can be used in some cases):
html.html_av-framed-box { padding: 0 !important; }Best regards,
NikkoThank you nikko.
i tried both codes but they don’t work.
mystery …. i don’t understand why it has no effect.Hi yes9310,
Just inspect the html element and look into the properties shown in the right side.
It should show which code that is currently taking effect (top to bottom, in order of priority).
If you can’t find the code in the list of codes there then most likely the code is not fetched either by browser caching or site caching.Best regards,
NikkoThank you Nikko. Problem solved …… It turns out that i completely forgot about this layout i simply had to put in stretch mode in the general layout …… And now it’s all fine.
- The topic ‘overwrite element padding’ is closed to new replies.