Hello,
I started since yesterday some minor modifications in CSS, by using Custom Code.
My question has nothing to do with “How to fix this” but Why the Custom Code doesn’t work in some cases.
For example I want to decrease the Breadcrumb Height. I found the following classes:
td_category_template_5 .td-scrumb-holder {
min-height: 62px;
background-color: #fcfcfc;
border-bottom: 1px solid #f2f2f2;
}
So I copied it to Custom Code with min-height: 10px;
It didn’t work. I did the same with the font size in megamenu. The same.
So before td_category_template_5 .td-scrumb-holder, do I have to put something else ?
Thank you in advance.
Well the min-height will not decrease the height of a container but rather specify the minimum height it can have. If the height is already set, the min height will not be able to decrease it. If you want to add a specific height to a container you can use either the ‘max-height’ or simply ‘height’
Your code simply tells the element it cannot be under 10 pixels height, but it does not specify the height in an absolute manner.
This explains it better than I can 🙂 http://www.w3schools.com/cssref/pr_dim_min-height.asp
Wehn experimenting with css it;s best to use the browser inspector and see if your code applies or not. We use both the browser inspector and a chrome extention called live css editor (free) http://screencast.com/t/CEIUgy8xIi2O to make sure the css applies. We usually add the !important property when the code does not apply.
I hope this helps a bit.
Thank you!
Hello Bogdan,
Before adding any CSS in Custom Code, I always test it with the browser inspector. That was just an example with the height. I did try to increase the font size in mega menu, but without any result.
So, in order to understand, if I want to modify something concerning CSS I just have to copy/paste the css exactly as it is in Custom Code and do the modifications there. Right ?
Like this one…
The original CSS:
.td_mega_menu_sub_cats a {
display: block;
font-size: 13px;
font-weight: 600;
color: #333;
padding: 5px 22px;
position: relative;
vertical-align: middle;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
my CSS:
.td_mega_menu_sub_cats a {
display: block;
font-size: 15px;
font-weight: 600;
color: #333;
padding: 5px 22px;
position: relative;
vertical-align: middle;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
thank you in advance !!!! 🙂
Yes but it depends on the situation. In most cases the exact same code will not override as css needs a stronger selector to be able to override the results. If you copy and paste the exact same css you will have to use the important property. Basically you will need to have something extra than the target css in order to re-write it. Either it;s the important property or an extra selector that leads to the same css.
Thank you!
Thank you ! 🙂
