Styling Masonry Portfolio

Hey Vera,

Thank you for the inquiry.

You can play around with the Styling > Masonry Settings > Size Settings and maybe adjust the padding around the masonry images a bit using css. Please provide the site URL in the private field so that we can check the element directly.

Best regards,
Ismael

Hi,

Thank you for the update.

You can use this css code to adjust the padding around the masonry image.

.av-masonry-container .av-masonry-entry .av-masonry-image-container img {
    padding: 10%;
}

To apply different padding values to different items, try to use the nth-child selectors.

Example:

.av-masonry-container .av-masonry-entry:nth-child(1) .av-masonry-image-container img {
    padding: 15%;
}

The nth-child(1) selector in the css code above will target the first masonry item and adjust the padding of the image within it. More info about nth-child selectors can be found here.

// https://css-tricks.com/almanac/selectors/n/nth-child/

Best regards,
Ismael

Hi,

Glad to know that the suggestions above are working. Regarding the image orientation, you can modify this code in the enfold/config-templatebuilder/avia-shortcode-helpers/class-avia-masonry.php file around line 605, but we are not sure how this would affect other masonry layouts.

	if( $size == 'fixed' )
				{
					if( ! empty( $attachment ) || ! empty( $before_content ) )
					{
						if( $auto )
						{
							$class_string .= $this->ratio_check_by_image_size( $attachment );
						}

						if( $manually )
						{
							$class_string .= $this->ratio_check_by_tag( $entry['tags'] );
						}
					}
				}

You can remove the condition $size == ‘fixed’ completely or just replace it with true.

if( true ) {
  // rest of the code
}

Best regards,
Ismael

Hi,

Sorry for the delay. Try to replace the whole code block with the following code.

	
$class_string .= $this->ratio_check_by_tag( $entry['tags'] );

This modification should check for the orientation tags and apply the appropriate class name to the masonry items regardless of the other conditions.

Best regards,
Ismael

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

Hi,

Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard