Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #574928

    Hi

    I can not get the color section shorter than about 100px: http://dns.d.pr/BXrD/2NKUG0R6

    I added this code but it didn’t work:
    .avia-section { min-height: 50px; }

    I also tried to add a specific div ID by adding this code into the CSS:

    #highlights {
        min-height: 20px;
    }

    And then I called “highlights” in the color section ID but didn’t work either.

    The only way I can change the height of the section is by setting height: 20px for example but then the contents will be misplaced, outside the color section as you can see here: http://dns.d.pr/jeRs/2nIFGs94 – the orange text should be in the center of the color section.

    Page in PVT if needed for troubleshooting.

    Thank you

    • This topic was modified 8 years, 2 months ago by sitesme.
    #574935

    Hi sitesme!

    Can you please clear your cache and try check again?
    I just did checked the site and I can see it working properly

    Cheers!
    Basilis

    #575012

    Hi,

    The text is centred but the height of the color section is still too high: http://dns.d.pr/NXTr/OxVzyfBz
    I would like to control to be a very thin color section with just about 5px above and 5px below the test there.

    Thank you

    #575594

    Hi,

    Please try the following in Quick CSS under Enfold–>General Styling:

    #destaques .avia_textblock p {
    margin:0 !important;
    }
    

    Best regards,
    Rikard

    #575638

    Hi Rikard,

    Unfortunately, the word was moved a bit up but the background area remains exactly the same (still big) and it was not decreased.

    Any other ideas?

    #576240

    Hi,

    Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Thanks,
    Rikard

    #576294

    Hi Rikard,

    Please check the admin in private.

    Thank you

    #577895

    Hi!

    Please select “no padding” or “small” option from color section option

    Cheers!
    Vinay Kashyap

    #579134

    Hi,

    That would work well but I have a custom CSS code (which I don’t know which one) for something else that is overriding the “No Padding” rule.

    Can you please check? I added all CSS code used previously now and I can no longer decrease the padding from that area.

    Thank you

    #580196

    Hi!

    You have to remove this css code:

    .avia-section .content {
        padding: 10px 0;
    }

    Regards,
    Ismael

    #583923

    Thank you for spotting this out Ismael

    I used the following code to give a specific space between each color section, not the color section padding:

    .avia-section .content {
        padding: 10px 0;
    }

    Is there a way I can still keep the color section spaces (from 1 color section to the next one) as it is and, at the same time, does not affect the color section contents? A way to blend both please?

    Thank you

    #585416

    Hey!

    hm? not sure what you mean. I think the code does this already. Or not? Can you highlight using screenshots what’s going on for you please? you can use imgur.com or dropbox to make things clear for us.

    Best regards,
    Andy

    #585420

    Hi Andy,

    Let me try to make it clear here.

    We are dealing with two different padding issues:

    1) The following code is to decrease the space between two color sections (vertically):

    .avia-section .content {
        padding: 10px 0;
    }

    2) I want the height of each color section to be different from one color section to another. This means, one may have no padding at all, the other may have a large padding, etc. With the code above, the padding drop-down option in Avia Builder does not work anymore if I add the code above. The code overrides the padding settings thatI select in the builder.

    So… in summary, I still want to keep the space between the each color section but (at the same time) I would like to have each color section height independent.

    Does this make sense? If not I will try to send you some screenshots.

    Thank you

    #586603

    Hi!

    Use the Section ID selector instead of the ‘.avia-section”. Example:

    #custom-section .content {
        padding: 10px 0;
    }

    Regards,
    Ismael

    #590379

    Hi Ismael,

    The problem is that I will then have to add a #custom-section tag on every colour section, is this right? The website has already dozens / hundreds of colour sections. I was looking for a single code that applies to all.

    In summary, I need a code that reduces the vertical space between color sections that does not affect the color section height, just the space between them.

    Thank you

    #590383

    Ok… please ignore my last message.

    I have decided to remove the code

    .avia-section .content {
    padding: 10px 0;
    }

    But even without this code, I still can not control the height of the color section to 20px for example.

    Please check the page in PVT. The section “Highlights” has a grey background and it is set as “no padding” with a custom height of 10px but it is not reflecting these rules: http://dns.d.pr/1fdeF/5rSFeuGP

    Thank you

    #590390

    Hi!

    Add the following:

    #top .avia-section {
        max-height: initial;
    }
    
    #top .avia-section .container{
        display: block;
        overflow: hidden;
    }

    Regards,
    Josue

    #594101

    Hi Josue,

    Unfortunately I am still unable to control the height to a minimum as 20px for example on a color section.

    Can you please check the credentials below and check what can I possibly be doing wrong?

    Thank you

    #594640

    Hey!

    Enfold sections have a minimum height set of 100px you need to reset that with CSS:

    #top .avia-section {
        max-height: initial;
    }

    Best regards,
    Josue

    #1320760

    To sitesme

    I had this same issue and finally figured it out after a day of “Inspecting” and fiddling with the settings and custom CSS. I finally ended up searching all the code in the CSS folder for “100px” and found the cause. In the Enfold CSS folder you will find a file called shortcode.css … In the COLOR SECTION of that file you will find the following CSS class defined …

    .avia-section{
    clear:both;
    width:100%;
    float:left;
    min-height:100px;
    position: static; /*fixes a glitch with bg image not displaying below video slide*/
    }

    Rather than change the 100px in the CSS file, I copied the code and pasted it the Theme Options – General Styling – Quick CSS, which will allow you to define Color Sections shallower than 100px and tweak the padding of your content accordingly. I set it to 50px for my purposes, but you can have at it.

    .avia-section{
    clear:both;
    width:100%;
    float:left;
    min-height: 50px !important;
    position: static; /*fixes a glitch with bg image not displaying below video slide*/
    }

    Best of luck.

    #1320791

    sitesme

    Make sure you include the !important so it takes precedence over all others. (Although custom css should by default, I never trust that).

    min-height: 50px !important;

    #1320892

    Hi ssssheff,

    Thanks for sharing your solution, it’s much appreciated :-)

    Best regards,
    Rikard

    #1367892

    incorrect place to add comment apologies

    • This reply was modified 1 year, 5 months ago by karmenka.
    #1367932

    Hi karmenka,

    We have replied to your other thread.

    Best regards,
    Rikard

Viewing 24 posts - 1 through 24 (of 24 total)
  • You must be logged in to reply to this topic.