-
Posts
-
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
Hi sitesme!
Can you please clear your cache and try check again?
I just did checked the site and I can see it working properlyCheers!
BasilisHi,
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
Hi,
Please try the following in Quick CSS under Enfold–>General Styling:
#destaques .avia_textblock p { margin:0 !important; }Best regards,
RikardHi 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?
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,
RikardHi,
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
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
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,
AndyHi 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
Hi!
Use the Section ID selector instead of the ‘.avia-section”. Example:
#custom-section .content { padding: 10px 0; }Regards,
IsmaelHi 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
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
Hi!
Add the following:
#top .avia-section { max-height: initial; } #top .avia-section .container{ display: block; overflow: hidden; }Regards,
JosueHi 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
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,
JosueTo 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.
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;
- You must be logged in to reply to this topic.