tiled galleries problem

Hmm I can’t say for sure what the issue is without a link to an example.

I know that many users have used the Jetpack tiled galleries successfully with Tracks, so if it is an option to wait until you can work on your live site then I would recommend that. Otherwise, if you can find a way to share a link with me I’ll give it a look.

Hi Ben,
I am still encountering the display problems described earlier. Since I have not put my blog online yet, I will attach some screenshots and code, if possible. I am using “easy image collage”, have set the width of the tiled gallery to 1050px and the width of the column, in which it is inserted to 1000px. Iam working with Google Chrome

Here you will find screenshots and code: https://wordpress.com/post/ainanani.wordpress.com/5734

the password is: pageforben

Would be really great, if you were able to help once again!!!

I’m getting a white screen when visiting that URL. Can you double-check it?

I played around with the Easy Image Collage plugin and might have some CSS that will work. Try adding this to the Additional CSS section in the Customizer:

.eic-frame {
  width: 100%;
}

Please try this URL: https://ainanani.wordpress.com/2018/03/23/test-page/

I will check the CSS

The CSS has no effect… I inserted it into the custom CSS of the theme and also tried inserting it into an individual post’s CSS (using Elementor).

Also checked with different browsers. Same phenomenon with Firefox amd IE, both latest editions…

A pity, but thanks a lot anyway!

Thank you – the new link worked well for me.

I’m still having trouble figuring out exactly why it’s not sizing properly, but the previous CSS may work if we try forcing it to apply with an !important tag and more specific selector, like this:

.eic-container .eic-frame {
  width: 100% !important;
}

When using the gallery, I see that the container element always fills the full width, so if the “frame” is forced to be 100% wide it should also occupy the complete width. Hopefully, the plugin’s Javascript will use the new dimensions and size the images appropriately for the space available.

This CSS had a rather strange effect… I have added two new screenshots to the test page…

Please do not spend too much time on trying to solve this issue. Maybe the website will act differently when online and not in alocal environment that does not allow jetpack to operate (localhost).

Thanks a lot!

Is it possible that the problem lies in the fact that I have widened the column using Elementor? I am using different widths for many of my post. So I did not change the templates or added custom CSS. Elementor lets you easily set the margins for every individual post, but this might in some way interfere with the general theme setting. At least it seems that the galleries are fitted into the original width as set by the theme, isn’t it? What do you think?

Hmm okay I may have to wait until there’s a live URL I can inspect to get a final solution.

I think that it is probably related to Elementor since the image sizing seems to work with the default post width in Tracks.

Maybe I could try playing around with the default post width a bit in the meantime. How can I set this default to – let’s say – 1000 px? I did not find how to do this among the CSS sippets…
Thanks a lot!

Would you be okay with a relative size instead of a fixed size? This CSS will make the content area much wider:

.entry-container {
  padding: 0 5%
}

The 5% value can be increased to make the space narrower.