Card elements are overlapping

Support
#1

Hi,
I have added 2 rows with 3 columns of the card element.
You will see I have added plenty of CSS to get them looking how I want to, however the cards now overlap. I need each row to be aligned and sitting just below the next (hope that makes sense). I’m sure you will see what I mean when you see it. Can you please let me know what I need to do to make this work they I need it to.

The page is www.naomipearce.com - it us under construction so will send the login as a secure note.

Many thanks in advance!!!
Naomi

#2

Hello Naomi,

Thanks for writing in! Regretfully we cannot check your site because the given password is incorrect.
Could you please double check it so that we can log in and be able to see your homepage.

Regards.

#3

Opppps! Sorry! I have now updated the secure note with the correct password! :slight_smile:

Thank you,
Naomi

#4

Hi Naomi,

Thank you for writing in, since you manually set the height of your cards front and back div (.front and .back), please set the height of the .x-card-inner as well because that is the container of the .front and .back div and its current height is lesser than those two.



You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Please bear in mind that customization like this is outside of the scope of support that we can offer, we could only point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

Cheers,

#5

Great thank you for your help with this. I have been able to add the css for the inner container which has worked perfectly (thank you), however for some reason now the column for each column is a little longer than the card… I have checked the margins and padding and all seem to be set at 0px. Is there something obvious that I am missing here?

Thanks again,
Naomi

#6

Hi Naomi,

There is a 10% padding set to the content of the cards:

Hope this helps.

#7

Yes you’re right, there was a 10% padding on the elements however I have now changed that to 0% with no change.

I don’t see how it would have to do with the padding anyway as it is just the bottom… there seems to be a margin in the row or column however I have not set any. Everything is set at 0.

Can you please take another look, something doesn’t seem to be adding up.

Many thanks in advance,
Naomi

#8

Hi Naomi,

The padding increases the height of the inner card. The space at the bottom of each card is because of its default bottom margin. I went ahead and edited each of the card element.

I inserted mbn class which means “margin bottom none”. The spaces or bottom margin is now set to 0.

Please check the page again.

#9

That is perfect! Thank you SO MUCH!
Support here is always 10 out of 10!!!

Naomi

#10

You’re most welcome Naomi!
We’re just glad we were able to help you out.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.