Forum Replies Created
-
Posts
-
I would love to see this addressed so that the generated HTML doesn’t need JS hacks like this.
Thanks that solution got me pretty close. It needed a document ready to work.
function av_custom_inline_script()
{
// apply role menu to subnav
wp_add_inline_script( ‘jquery’,
”
(function($) {
$( document ).ready( function() {
$(‘.av-subnav-menu’).attr(‘role’, ‘menu’);
$(‘#scroll-top-link’).attr(‘tabindex’, ‘-1’);
})
})(jQuery);
”
);
}
add_action( ‘wp_enqueue_scripts’, ‘av_custom_inline_script’ );> it might distort the element a bit.
Yeah, I had already tried to adjust the height. It distorts it a lot.
I also have a pie chart issue. With 12 labels, the whole pie disappears because of the fixed height of the element.
Aloha Nikko,
This ends up being a really common requirement for many of our projects, and it would be great if this were handled more gracefully in the theme. Duplicating sections and then hiding them on various screen sizes is not ideal for a variety of reasons including web accessibility. We do not want people using screen readers to get a bunch of duplicate content.
So here is our solution for alternating the stacking order of one-half blocks within a color section.
1) Arrange the one-half blocks in the correct order that you want them to stack on mobile, which will be opposite of how they appear on desktop.
2) Add a class called switcharoo to the Color Section.
3) Add the css code below wherever you make your CSS edits. You may need to remove the +30px if you are not using Space Between Columns.@media screen and ( min-width: 768px ) { .switcharoo .av_one_half.avia-builder-el-first { left: calc(50% + 30px); } .switcharoo .av_one_half.avia-builder-el-last { right: calc(50% + 30px); } }Regards,
David Fry
Tanuki InteractiveThanks Victoria, that worked great.
@Hirudika, this will work but is dependent on two things: the height of elements within the grid row, and the order of the grid rows. So you’ll notice in the code she provides min-height separately for each grid row (#av-layout-grid-1 and #av-layout-grid-2).
