Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1200683

    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.

    • This topic was modified 4 years, 2 months ago by SyberKnight.
    #1200688

    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! :-)

    #1202331

    Hi SyberKnight,

    Could you please give us a link to your website, we need more context to be able to help you.

    You can just remove the height for the code block.

    Best regards,
    Victoria

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.