Magazine element styling

Hey,

Thanks for contacting us!

1-Unfortunately, there is not a quick CSS snippet we can share to achieve this. Would adding 2 Magazine elements and displaying only 1 item in the bottom one and displaying it bigger would work?

2- Please edit your Magazine element and give it a custom ID (“right-mag” in example below) and add following code to bottom of Quick CSS field in Enfold theme options > General Styling tab

#right-mag .av-magazine-thumbnail {
  float: right;
  margin-right: 0;
  margin-left: 15px;
}

Best regards,
Yigit

Hi,
Thank you for your patience, I’m not sure how you would like this, please link to your page and include a mockup of how you would like it.

Best regards,
Mike

Hi,
I’m not sure that I understand because I was able to create this layout using the current magazine options when using two magazine elements in two columns, the element on the left only shows 4 thumbnails and the element on the right shows one larger 1030px x 1030px image.

So I’m not sure what you would like to change about the layout.

To use larger thumbnail images for the magazine element, I added the custom class larger-thumbnails to the element on the left and this script at the end of my child theme functions.php file in Appearance ▸ Editor:

function custom_mag_thumb_size() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
$('.av-magazine.larger-thumbnails .av-magazine-entry img').attr('width', '180px');
$('.av-magazine.larger-thumbnails .av-magazine-entry img').attr('height', '180px');
$('.av-magazine.larger-thumbnails .av-magazine-entry img').attr('sizes', '(max-width: 180px) 100vw, 180px');
$('.av-magazine.larger-thumbnails .av-magazine-entry .av-magazine-thumbnail').css({'height': '180px','width': '180px'});
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'custom_mag_thumb_size');

and this was the result:

I linked my test page below, please give this a try.

Best regards,
Mike

Hi,
The reason that one entry was shown twice was because I didn’t use the offset option, I was trying to demonstrate the layout, when I choose the offset Do not allow duplicate posts on the entire page (set offset automatically) there are no duplicates:

and the result:

But I think I understand what you mean now so I tested with one element having the top big image to the side and it fell on the left:

To flip it to the other side I added this css:

#avia-magazine-1 .av-magazine-hero {
	float: right;
}
#avia-magazine-1.av-magazine .av-magazine-sideshow.av_one_half {
    margin-right: 3%;
    padding-right: 3%;
    width: 50%;
    border-right-width: 1px;
    border-right-style: solid;
    margin-left: 0;
    padding-left: 0;
    width: 50%;
    border-left-width: 0px;
    border-left-style: none;
}

and the result:

Best regards,
Mike