Remove white space between rows

Please help me with the following:
1
Remove white space between the two rows with each four cards.
So one block of eights card is showing without margins.
2
Give all cards a fixed equal height independently from the content of the card.
(Later on I will cut one picture in eight parts and place them in the cards pattern)

Thanks

Hi There,

Thanks for writing in! Please provide us with the URL to your referenced page, so that we can assist you with a possible workaround.

Thanks!

www.ondernap.nl
First chapter ‘Onder NAP’

Thanks

Hi There,

Please add the following CSS rules into your Customizer, Custom > Edit Global CSS area.

.page-id-22 .x-card-inner {
    min-height: 400px;
}
.page-id-22 .x-card-outer {
    margin-bottom: 0;
}

Hope that helps.

Hi
That works sublime!
Thanks

Tjeerd

You’re welcome.

Another question about my 8 cards design:
When I decrease the window on desktop the images in the cards are being cut off at the left and right side of each image. I would like to keep the total image visible in all cases.
Can you help me with this problem?

Hi Tjeerd,

The image gets cut off because the dimension of the container gets lessened as you resize the browser and since the images are set to be contains in the container, the left and right areas automatically gets cut of leaving the center part of the image as is.

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme as this is how it is supposed to function responsively. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

Thats a pity. Understand.
Thanks.

But I am trying another solution.
Simply change image on mouse-over. So no use of Cards anymore.
Can you provide me that code in CSS or html?
Seems simple; have tried several codes but I didnt get it working.
Thanks

Hi There,

Nope, that is not simple especially if we are dealing with a background-image. To understand how a background-image works please play with this little tool here, you’ll notice that whatever value you choose, the “smiley image” will not be perfect fit on the container, its either it won’t cover the entire container, being cutoff, or being stretch/squeeze. You might get the background-image perfect fit on your screen but it won’t on other screen sizes, notably on mobile screens.

CSS property background-size

Yes, you need a custom CSS and HTML (possibly a JS too) on what you’re trying to do, regretfully this customization will fall outside of the support that we can offer.

Though I think you can still achieve what you want with the card element in desktop view, but you need to do a different layout/section for mobile view. Utilizing the Hide Base on Screen Width feature where you can show a different section for different screen views.

Thank you for understanding.

Understand your reply. Thanks.
But what if I do not choose a background image but a ‘normal’ one out of the elements.
And then I would like to get another image at mouse-over.
Also out of scope?

Thnak you.

Hi there,

You would need another custom code for that since hover image will not work on that. It will mostly hover through javascript code. Plus, image should match between base and hover image.

CSS hover only applies for CSS while standard image element isn’t added by CSS.

Thanks!

Let me discribe my wishes in another way.
Starting with an image with transparant color-overlay and text. Image is still visible.
After hover the image is visible in a normal way.
And this effect also viceversa…
Maybe there is antoher way to achieve this simple effect.

Thanks again.

Hey there,

You should refer to https://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html and adjust the code as per your need.

Hope this helps!

Thanks for the reply.
I have tried it another way using html and css
Seems working but I would like to make some adjustments.

1
Would like the second row to align at the top column and the row above align at the bottom of the column. In this way one block of eight images will be the result. How can I realize that.
2
Can I also make an opposite hoever-effect? So starting with the transparant image and text and showing the ‘normal’ blue picture at hover?

Thanks in advance.

Screendump:

Code I used:

HTML

Avatar
Dit is een proefje

CSS

.container {
position: relative;
width: 100%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #ea8a00;
}

.container:hover .overlay {
opacity: 0.8;
}

.text {
color: white;
font-size: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

Hi there,

  • It is not possible to do the effect you want with the code you have on your website. There are lots of empty p and br tags which causes that white space. You need to remove them:

  • It is not possible to have that reverse hover effect you mentioned out of the box.

Please kindly consider that the requests you keep asking are all related to the custom development and is outside of the scope of our support.

Instead, I suggest that you use Grid plugins to achieve somehow the same effect you like. I suggest that you take a look to Essential Grids which is bundled with our theme. For more information:

Thank you for your understanding.

Thanks
Seems a good suggestion to me.
Going to explore Essential Grid.

Glad we could help.

Cheers!