Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #262946

    I am trying to make the color-section 20px high.
    I looked here, and tried

    #color-section-01{
    max-height: 100px; 
    height: 20px;  
    }

    but that didn’t work for me.

    • This topic was modified 10 years, 7 months ago by martinbelton.
    #262952

    If i try to create a color section the id is “av_section_1”

    But best would be to give the color section an ID (at the very bottom of the color section options)
    And then use the ID to change it.
    Also you want to lower the min-height.

    #nameOfColorSection {
        min-height: 20px;
    }

    nameOfColorSection needs to be the same as the ID you gave the color section.
    That sets the minimum height of the Color Section to 5 pixels.
    The height still increases depending on the content inside of the color section.

    #262953

    Great – thank you! min-height addition did the trick :)

    • This reply was modified 10 years, 7 months ago by martinbelton.
    #262954

    min-height is the only thing you need.
    reducing the amount of code reduces the load time of you page. even if it is only 0.0001 second.

    #color-section-01  {     
        min-height: 20px; 
    }
    #262956

    Ended up using

    #color-section-01{
    max-height: 20px;  
    min-height: 20px;
    height :20px
    }
    • This reply was modified 10 years, 7 months ago by martinbelton.
    #262959

    i suggest using the min-height property only.
    Even if its only 2 extra lines of code, stuff like that will add up in the future and reduce the loading times of your page.

    min-height = minimum height of the element when it’s empty.
    max-height= maximum height. Important if you dont want a layout to get destroyed because the content of the element makes it to big.
    height= defines a fix size for the element. cant be lower then the min-height or heigher then the max-height

    • This reply was modified 10 years, 7 months ago by Flikk.
    #262964

    Using only min-height doesn’t work for me. – Could you please repost your answer with important in it?

    #262966

    I can get away with

    #color-section-1{
    max-height: 20px;  
    min-height: 20px;
    }

    but not just min-height

    #262968

    it would just be
    min-height: 20px !important;

    but i guess the problem is that the height is defined somewhere else.
    Can’t say that without seeing the site.

    So you should use:

    #color-section-01{
    min-height: 20px;
    height: 20px;
    }

    The “!important” just forces the parameter to that element. The min-height can be defined at different places for an element. And depending on where and how it is defined, they have different priorities.
    Adding “!important” to it, just increases the priority to the heighest (unless others use the “!important” as well).
    So normally you shouldn’t use it because the priorities get messed up and it is harder to understand whats going on.

    #262969

    Hey!

    Glad @flikk helped! Let us know if you have any other questions or issues

    @flikk
    thanks :)

    Regards,
    Yigit

    #262971

    you’re welcome.

    I have some free time and it’s a good theme.
    So i thought i could help a bit ;)

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Thin color-section’ is closed to new replies.