Hi Rikard,

Thanks for your reply.

In the wp-config.php file, I enabled debugging:

define( ‘WP_DEBUG’, true );

Then I opened FileZilla, went to wordpress > wp-content and downloaded the debug.log file, which mentions several errors concerning the SVG Support plugin and “allowed memory size of bytes exhausted”.

So I deactivated the SVG Support plugin.

And I added the following code (highlighted in bold) to the wp-config.php file to increase the memory limit:

[…]
* @package WordPress
*/

define(‘WP_MEMORY_LIMIT’, ‘512M’);
define(‘WP_MAX_MEMORY_LIMIT’, ‘512M’);

/** MySQL Einstellungen […]

But the problem still consists.

Please find a download-link of the debug.log file in the private content area.

Best regards,

zizibe1

Hi Yigit,

Thanks for your reply.

You can close this topic now.

Best regards,

zizibe1

Hi Rikard,

Thanks for your reply.

Your code could solve the issue.

Thanks again. You can close this topic now.

Best regards,

zizibe1

Hi Yigit,

Awesome! Thank you very much for your support.

For the sake of completeness, it should be mentioned that the custom CSS code related to that customization is:

#flex-gallery-alt .avia-gallery-thumb a:last-of-type { 
width: 100% !important; 
} 

Thanks again. You can close this topic now.

Best regards,

zizibe1

Hi Guenni007,

Thanks for your reply.

For me, it’s very important that the flexbox layout and the gallery layout are exactly the same size. I would very much like to know how to fine-tune that. But I understand if you don’t want to invest any more time in this topic.

I’ve posted a link to the page with the flexbox layout and a link to the page with the gallery layout in the private content are. I would appreciate it very much if a moderator could help me.

Best regards,

zizibe1

Hi Guenni007,

Thanks for your reply. I’m sorry for the misunderstanding.

In my previous post, I’d mentioned that the vertical white space between the images was too big. But now I’ve realized that the two horizontal white spaces were too thin actually.

Thanks to your explanation, I could adjust the code like this:

.flex4on1  {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding-top: 0px
}

.flex4on1::before,
.flex4on1::after {
	margin: 0 !important;
    display: none !important;
}
.flex4on1 .avia-image-container {
	flex: 0 1 calc(50% - 3px);
	margin: 0 0 6px;
}

.flex4on1 .avia-image-container:nth-of-type(5n) {
	flex: 1 1 100%
}

The layout looks like this now:

Now, the white spaces between the images are alright.

I have another two questions:

1.
The corners of the images should be sharp. How do I get rid of the rounded corners?*

2.
Currently, the lightbox displays a smaller version of the images (1030 × 687). But the lightbox should display the images in their original size (1196 × 798). How do I achieve this?

Many thanks,

zizibe1

* I’ve just realized that the white spaces between the images are a little bit bigger when the corners of the images are sharp. That’s how it’s supposed to be. So, how can I achieve the following layout which has images with sharp corners?

(Photo credits: DapurMelodi/pexels.com, Andrea Piacquadio/pexels.com, Manzil Joshi/pexels.com, Weir ESCO/pexels.com, Jannis Knorr/pexels.com)

• This reply was modified 4 years, 5 months ago by zizibe1. Reason: * addendum

Hi Guenni007,

Thanks for your efforts.

I’ve added the code from your testpage https://webers-testseite.de/4on1-flexbox-model/ to Enfold Child > General Styling > Quick CSS and made some adjustments:

.flex4on1  {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding-top: 10px
}

.flex4on1 .avia-image-container {
  flex: 0 1 calc(50% - 4px);
  margin: 0 0 4px;
}

.flex4on1 .avia-image-container:nth-of-type(5n) {
  flex: 1 1 100%
}

@media only screen and (max-width: 989px) {
  .flex4on1 .avia-image-container {
    flex: 0 1 calc(50% - 2px);
    margin: 0 0 4px;
  }
}

Then I’ve created a new page and added a color-section with two columns in it. The left 3/5 column has only five image elements in it. The right 2/5 column has only text elements in it.

To the left column, I’ve added the custom css class flex4on1 (Edit Cell > Advanced > Developper Settings > Custom CSS Class).

Now, the layout looks like this (unwanted outcomes marked red and green):

But it should look like this:

Again, I couldn’t figure out how to correct this. Do you see a solution?

Best regards

zizibe1

(Photo credits: DapurMelodi/pexels.com, Andrea Piacquadio/pexels.com, Manzil Joshi/pexels.com, Weir ESCO/pexels.com, Jannis Knorr/pexels.com)

• This reply was modified 4 years, 5 months ago by zizibe1. Reason: Correction of the code

Hi Guenni007,

Thanks for your reply.

I’ve added the code from your example page https://webers-testseite.de/masonry-4on1big/ to Enfold Child > General Styling > Quick CSS:

#top .container .av-masonry.masonry41.av-large-gap {
  width: calc(100% + 3px);
}

.masonry41.av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry {
  margin: 3px !important;
}

.masonry41 .av-masonry-entry:nth-of-type(5n) {
  width: 100% !important;
}

.masonry41 .av-masonry-entry:nth-of-type(5n) img {
  width: 100% !important;
  height: auto;
}

@media only screen and (min-width: 990px) {
  .masonry41 .av-masonry-entry:nth-of-type(5n) {
    width: calc(100% - 6px) !important;
  }
}

@media only screen and (max-width: 989px) {
  .masonry41 .av-masonry-entry:nth-of-type(5n) {
    width: calc(100% - 3px) !important;
  }
}

@media only screen and (max-width: 767px) {
  .masonry41 .av-masonry-entry:nth-of-type(5n) {
    width: 100% !important;
  }
}

Now, my layout looks like this:

1.
The white space between the images looks alright now. Unfortunately, on the right side, the big image doesn’t align with the thumbnails (see red marking). I’ve tried to adjust this by changing the different parameters in the code (or :) chew by myself a little when eating, as you would call it), but I couldn’t figure it out.

2.
The lightbox of the Gallery displays the images in their original size (1196 × 798). But the lightbox of the Masonry Gallery displays a smaller version of the images (only 1030 × 687). What can I do to the make the lightbox of the Masonry Gallery show the images in their original size?

Best regards,

zizibe1

(Photo credits: DapurMelodi/pexels.com, Andrea Piacquadio/pexels.com, Manzil Joshi/pexels.com, Weir ESCO/pexels.com, Jannis Knorr/pexels.com)

Hi Guenni007,

Thanks for your input.

According to your post, I could realize the following layout:

But the Masonry Gallery should look like this:

a)
The white space between the images should be as small as on the screenshot above.

b)
On the right side, the big image should align with the thumbnails above as on the screenshot above.

c)
In the lightbox of the Masonry Gallery, the images are smaller than in the lightbox of the Gallery. But they should appear the same size.

How can I achieve this?

Best regards,

zizibe1

(Photo credits: DapurMelodi/pexels.com, Andrea Piacquadio/pexels.com, Manzil Joshi/pexels.com, Weir ESCO/pexels.com, Jannis Knorr/pexels.com)

Hi Ismael,

Thanks for your reply.

I’ve used the Masonry Gallery element, but I didn’t get the desired result.

1.
In the Masonry Gallery element, the white space between the big image and the thumbnails and also between each thumbnail is too big.

In the Gallery element, I could correct this by adding the following two codes to Enfold Child > General Styling > Quick CSS:

/* no border around gallery big preview, correct left and bottom padding */
#top div .avia-gallery .avia-gallery-big {
   border-style: none;
   padding-left: 0px;
   padding-bottom: 0px;
}

/* no border around gallery thumbnails, padding 0px to reduce white space, correct left padding of gallery thumbnails */
#top div .avia-gallery img,
#top #wrap_all .avia-gallery .avia-gallery-thumb a img {
   border-style: none;
   padding-top: 0px;
   padding-left: 0px;
}

Could you please tell me the codes to correct the Masonry Gallery element accordingly?

2.
In the preview of the Masonry Gallery element, only sections of the images are visible. But as in the Gallery element, the whole images should be visible (for comparison, please see the new screenshot in the private content area).

3.
In the lightbox of the Masonry Gallery element, the images are smaller than in the lightbox of the Gallery element. But they should appear the same size.

Best regards,

zizibe 1

Hi Rikard,

Thanks for your reply.

In the WordPress admin area, I went to Enfold Child > Theme options > Select Your Editor > Use WP Classic Editor > Save all changes.

Now, the two live sites look fine as well.

Thanks again for your great support. You can close this topic now.

Best regards,

zizibe1

Hi Ismael,

Thank you for your reply.

Meanwhile, I hired a Codeable expert which solved my issue.

You can close this topic.

Thanks,

zizibe1

Hi Rikard,

Thank you for your reply.

I removed the 500px padding on the column with the SVG (caption) in it. Now I can change the section height, but I don’t get the result intended.

1.
The background image in the color section should have at least 100 % of the browser window height on desktop screen. I don’t want to change this setting.

2.
When I remove the 500px padding on the column with the SVG in it, the SVG stands too low. The SVG should stay in die upper half of the background image

So I went back to my original settings I had described in my first post.

To correct the layout on mobile screen, I duplicated the color section of the front page, cropped the background image, adjusted the settings and then selected to hide it on all screens except mobile.

Now, on desktop screen, tablet screen vertical and smartphone screen vertical, the layout is okay.

According to this method, I also tried to correct the layout on tablet screen horizontal and smartphone screen horizontal, but it didn’t work:
– On tablet screen horizontal, there’s too much of the foreground and too little of the sky of the background image visible.
– On smartphone screen horizontal, the SVG is too big.

How can I correct this?

Please have a look at the screenshot in the private content area to see how the layout looks on the different screens.

Best regards,

zizibe1

Hi Victoria,

The code works fine. Thank you very much for your support.

You can close this topic now.

Best regards,

zizibe1