Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #1259127

    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.

    • This topic was modified 4 years ago by yes9310.
    #1259178

    Hi yes9310,

    Can you give us the link of the page mentioned? so we can inspect further.

    Best regards,
    Nikko

    #1259388

    Hello, 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

    screenshot

    View post on imgur.com

    • This reply was modified 4 years ago by yes9310.
    #1259424

    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,
    Victoria

    #1259438

    Oh yes !! It works !! Thanks very much Victoria !

    #1259439

    Although … 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 :

    View post on imgur.com

    #1259440

    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;
    }

    ?

    View post on imgur.com

    #1259632

    Hi yes9310,

    Can you try adding this CSS code as well:

    #after_submenu .content {
      padding-top: 0;
    }

    Best regards,
    Nikko

    #1259666

    Thanks 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.

    #1259754

    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,
    Nikko

    #1259952

    Thank 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 :

    View post on imgur.com


    it would mean that i should write “.page-id-2219#after_submenu .content” ? am i correct ?

    Also, about this :

    View post on imgur.com

    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 :

    View post on imgur.com

    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 !

    • This reply was modified 4 years ago by yes9310.
    #1260204

    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 .content

    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 :
    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 .logo

    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.
    You can try to inspect that element and try to check if there are css conflicts that causes the issue.

    Best regards,
    Nikko

    #1260214

    Thank you Nikko.

    View post on imgur.com


    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 :)

    ………………… …………….. ……………………….

    View post on imgur.com


    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.

    ………………….. ………………………. ……………………..

    View post on imgur.com


    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.

    • This reply was modified 4 years ago by yes9310.
    #1260269

    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,
    Nikko

    #1260419

    Thank you Nikko, i’ll review it.

    But for now i really can’t find the right id or class for this one :

    View post on imgur.com

    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.

    #1260643

    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,
    Nikko

    #1260779

    Thanks 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.

    #1260874

    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,
    Nikko

    #1261201

    Thank you nikko.
    i tried both codes but they don’t work.
    mystery …. i don’t understand why it has no effect.

    #1261709

    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,
    Nikko

    #1262271

    Thank 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.

    #1262319

    Hi yes9310,

    We’re happy to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘overwrite element padding’ is closed to new replies.