Problem with cards after publishing

[KIRK]

Hello everybody!

I have a problem with cards in the card container.

Everything looks good in the preview. However, if I publish the page, the cards overlap. Then if I refresh the page a couple of times, it shows up correctly.

Does anyone have any idea where the error is here?

Demoproject At the bottom of the project is the screenshot of the preview.

Thanks in advance
KIRK

[Pablo]

I do not see any problems in the project or generated code

[BaconFries]

I did notice one thing that may or may not be the issue. In the source your index page is showing as index.js and not index.html Try doing the following
Go to Tools-> Options-> HTML and make sure in the Javascript section that "Move Javascripts to end of the page" is unchecked.

[KIRK]

Thank you both for the quick replies.

Sorry, it's still overlapping for me.

Via the Demoproject link you can find what it looks like after publishing (two images at the end). Tested on several Windows 10 computers and several browsers (Edge, Chrome, FF). It seems to look fine on an iPad with Safari.

I checked the "Move Javascripts to end of the page" function. It is unschecked!

I must have a mistake in here somewhere.
Any idea!

[Pablo]

Did you also try with "Move Javascripts to end of the page" enabled?

[KIRK]

Hello Pablo,
I have now "Move Javascripts to end of the page" enabled.

It seems to work now in the demo project. But unfortunately not in my final project.
Can this have anything to do with the gallery?

I have to try "Load built-in JavaScript files asyncronously" enabled.
Then the cards work, but the gallery no longer works.

Can you take a look at the final project there?

Project

[Pablo]

The link to your project does not work for me.

But I think it is related to the way masonry (which is a third party script) works. It has to do with timing. There are too many images so it will take to long for the script calculate the final sizes.
So, in this combination 'masonry' cannot be used.

[KIRK]

Does the link work now?

Do you mean masonry of the cards? There are six cards with one picture each. Or in combination with the gallery?

[pajadt]

Hi Kirk
All work at your website, your links at cards don't work, you have to correct that, everything else works normally, both the gallery and the cards

[Pablo]

Do you mean masonry of the cards?

Yes

I was referring to all the images on the pages.
It takes some time to download and load these images. If this takes to long then the masonry script may not be able to determined the size of the cards, because the script does not know how long it needs to wait until everything is loaded.
That is why it works locally or with less images.

[KIRK]

OK thanks. Then the "Masonry" option is not the right one here.

Do you have a tip on how I can get three cards in a row? So two rows with three cards and one row with the last (one) card.
In smaller views then two in a row and in the smartphone view one card.

[KIRK]

Hi Kirk
All work at your website, your links at cards don't work, you have to correct that, everything else works normally, both the gallery and the cards

Hi Pajadt,
thanks for the hint with the links. I still have to finalize this.

[Pablo]

The option 'card columns' can be used to create columns.
The column property is responsive, so it can be different in breakpoints

[KIRK]

I'm already trying it out. But there are always three images in the first row and then two rows with two images each.

I updated the link above using card columns:

Column count: 3
Column gap: 16
Position: floating

[Pablo]

Do you have a demo project, so I can see your settings?

[KIRK]

Do you have a demo project, so I can see your settings?

Do you mean a wbs file?

The Site you can see here: Project

[Pablo]

Do you mean a wbs file?

Yes, but I do not need to complete project. Only a simple demo with one page and the cards.

See also:
viewtopic.php?f=10&t=82134

[KIRK]

Here you can find the site project

Here you can find the wbs file: wbs file

[Pablo]

Thanks for the project.
The behavior is correct. Columns go from top-to-bottom, left-to-right.
So, card1, card2, card3 are in the first column, card4, card5, card6 in the second column etc.

If you want different behavior then you can use a flex container. In that case, you have more control over the flex box properties.
For example, if you want 3 items per row then set the flex-basis to 33%

[KIRK]

That's it!

This 33% flex-basis!

Big thanks Pablo!