Hi Kerim,
Thanks for writing back and glad my suggestion helped.
It is important to remind that as much as we would like to help, 1-1 custom code assistance is beyond the scope of support that we provide ( ref: https://toolset.com/toolset-support-policy/ ). But we do our best to guide in the right direction, whenever possible.
1. To show some content like image in the card to be full width, you can follow these steps:
a). Change the padding value that is applied to div with "postborder" class from "padding: 20px 40px;" to "padding: 0px;".
b). You can split the content of this "postborder" div in two parts:
<div class="postborder">
<div class="postborder-full">
Image
</div>
<div class="postborder-padded">
Rest of the content
</div>
</div>
Using custom CSS, you can apply the padding only to the div with class "postborder-padded". To check which CSS code is applying to different page elements and include your own custom CSS, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link
Here is another guide on CSS syntax and selectors:
hidden link
2. To make the entire Card ( div with class "postborder") clickable in a way that works safely in all browsers, you'll need to include some custom script:
a). You can include the link in a "data-url" attribute, in div "postborder", so that it will change from:
To:
<div class="postborder" data-url="[wpv-post-url]">
b). In your view's "JS editor" tab in the "Loop Editor" section, you can include the following script that takes the visitors to that link, when clicked:
jQuery( document ).ready( function( $ ) {
$(".postborder").click(function() {
window.location = $(this).attr("data-url");
return false;
});
});
c). To change the cursor to a pointer, when the card is hovered, just as a normal link does, you can update the custom CSS block, from:
.postborder:hover{
box-shadow: 1px 8px 20px grey;
-webkit-transition: box-shadow .6s ease-in;
}
To:
.postborder:hover{
cursor: pointer;
box-shadow: 1px 8px 20px grey;
-webkit-transition: box-shadow .6s ease-in;
}
3. To improve the responsiveness of these cards on smaller screens, you can wrap the first two blocks of custom CSS code from my last message inside a media query, so that they only apply to screens with at least 768 px width:
Existing code:
.js-wpv-view-layout .row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.js-wpv-view-layout .row > [class*='col-'] {
display: flex;
flex-direction: column;
}
Updated code:
@media only screen and (min-width: 768px) {
.js-wpv-view-layout .row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.js-wpv-view-layout .row > [class*='col-'] {
display: flex;
flex-direction: column;
}
}
You can learn more about CSS media queries from:
hidden link
I hope this helps.
regards,
Waqar
