Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • May 11, 2014 at 8:25 pm #262946
    martinbelton

    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 9 years, 11 months ago by martinbelton.
    May 11, 2014 at 8:42 pm #262952
    Flikk

    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.

    May 11, 2014 at 8:50 pm #262953
    martinbelton

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

    • This reply was modified 9 years, 11 months ago by martinbelton.
    May 11, 2014 at 8:51 pm #262954
    Flikk

    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; 
}
    May 11, 2014 at 8:53 pm #262956
    martinbelton

    Ended up using

    #color-section-01{
max-height: 20px;  
min-height: 20px;
height :20px
}
    • This reply was modified 9 years, 11 months ago by martinbelton.
    May 11, 2014 at 8:58 pm #262959
    Flikk

    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 9 years, 11 months ago by Flikk.
    May 11, 2014 at 9:13 pm #262964
    martinbelton

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

    May 11, 2014 at 9:15 pm #262966
    martinbelton

    I can get away with

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

    but not just min-height

    May 11, 2014 at 9:16 pm #262968
    Flikk

    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.

    May 11, 2014 at 9:18 pm #262969
    Yigit

    Hey!

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

    @flikk     thanks :)

    Regards,
    Yigit

    May 11, 2014 at 9:25 pm #262971
    Flikk

    you’re welcome.

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

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