-
Posts
-
by simply adding a “Code Block” in the builder for a page, it wraps that script in many containers with styles.
for example, i added one then looked in the chrome dev tools for the page source and it looks like this…<div id="after_submenu_1" class="main_color av_default_container_wrap container_wrap fullsize" style=" "> <div class="container"> <div class="template-page content av-content-full alpha units"> <div class="post-entry post-entry-type-page post-entry-2132"> <div class="entry-content-wrapper clearfix"> <section class="avia_codeblock_section avia_code_block_2" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"> <div class="avia_codeblock " itemprop="text"> <script> (function($){ //script here })(jQuery); </script> </div> </section> </div> </div> </div> </div> </div>…some of those classes have styles which puts a blank area on the page where i placed it. even if i put it at the bottom of the page, then there’s extra height between the content & the footer.
is there a way to backwards style this to give it a display:none or something?
i tried adding a class wrapper to the script in the code block, but it just adds that class to the first div wrapper. i need the whole thing to disappear.
-thanks.EDIT: i discovered it’s the “.content” class in the 3rd div that’s got “padding-top: 50px; padding-bottom: 50px;” css.
i don’t want to globally make that zero because that would mess up ALL the other content blocks.
instead, i’m trying to find a way to do it for just the blocks that have the code block buried in them.EDIT 2: okay, so i found a crude workaround.
my -2¢ would be for the developers to allow for code blocks that are not wrapped & don’t take up any space in the page layout.but in the meantime, here’s what i figured out in case it would help anyone else…
put the code block inside a “Color Section” (which is one of the layout blocks). this one, unlike the others, will put your custom class in the top-most wrapper.
so insert the color section, then go to the developer area & give it a custom class name (ex: custom-class-name).
then put your code block inside that.
then inside your code block, at the top before your <script> tag, put…<style> .custom-class-name.avia-section { min-height: 0; } .custom-class-name .content { padding-top: 0; padding-bottom: 0; } </style> <script> ///your js code </script>…note, there should be NO space between “.custom-class-name.avia-section” but there SHOULD be a space between “.custom-class-name .content”
if anyone has a better solution… i’m all ears! :-)
- You must be logged in to reply to this topic.