-
AuthorPosts
-
January 30, 2016 at 8:37 am #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, 10 months ago by sitesme.
January 30, 2016 at 9:07 am #574935Hi sitesme!
Can you please clear your cache and try check again?
I just did checked the site and I can see it working properlyCheers!
BasilisJanuary 30, 2016 at 3:21 pm #575012Hi,
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
February 1, 2016 at 7:52 am #575594Hi,
Please try the following in Quick CSS under Enfold–>General Styling:
#destaques .avia_textblock p { margin:0 !important; }
Best regards,
RikardFebruary 1, 2016 at 8:52 am #575638Hi 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?
February 2, 2016 at 5:48 am #576240Hi,
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,
RikardFebruary 2, 2016 at 8:35 am #576294Hi Rikard,
Please check the admin in private.
Thank you
February 4, 2016 at 5:41 pm #577895Hi!
Please select “no padding” or “small” option from color section option
Cheers!
Vinay KashyapFebruary 7, 2016 at 7:21 am #579134Hi,
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
February 9, 2016 at 8:25 am #580196Hi!
You have to remove this css code:
.avia-section .content { padding: 10px 0; }
Regards,
IsmaelFebruary 16, 2016 at 7:31 am #583923Thank 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
February 18, 2016 at 2:50 pm #585416Hey!
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,
AndyFebruary 18, 2016 at 2:58 pm #585420Hi 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
February 21, 2016 at 7:44 am #586603Hi!
Use the Section ID selector instead of the ‘.avia-section”. Example:
#custom-section .content { padding: 10px 0; }
Regards,
IsmaelFebruary 28, 2016 at 10:33 am #590379Hi 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
February 28, 2016 at 11:17 am #590383Ok… 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
February 28, 2016 at 12:58 pm #590390Hi!
Add the following:
#top .avia-section { max-height: initial; } #top .avia-section .container{ display: block; overflow: hidden; }
Regards,
JosueMarch 7, 2016 at 7:21 am #594101Hi 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
March 7, 2016 at 11:04 pm #594640Hey!
Enfold sections have a minimum height set of 100px you need to reset that with CSS:
#top .avia-section { max-height: initial; }
Best regards,
JosueSeptember 13, 2021 at 4:57 pm #1320760To 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.
September 13, 2021 at 6:48 pm #1320791sitesme
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;
September 14, 2021 at 12:57 pm #1320892Hi ssssheff,
Thanks for sharing your solution, it’s much appreciated :-)
Best regards,
RikardOctober 7, 2022 at 3:57 am #1367892incorrect place to add comment apologies
- This reply was modified 2 years, 2 months ago by karmenka.
October 7, 2022 at 11:03 am #1367932 -
AuthorPosts
- You must be logged in to reply to this topic.