Hello! currently this block https://ibb.co/R0yPTLQ is going to render 5 posts from the same category
Is it possible to change 4 from Category A and banner on the right from category B? https://ibb.co/LtqgthF
Thanks
Hi fabioweb90, unfortunately the filter is apply on entire block, the only way to achieve this is to set a row and set on a layout like this one -> https://i.imgur.com/ZbhniYK.jpg then in left column set a block with 4 posts and in the right one set a block with one post.
Hope this will help you!
Ok thanks. I was able to reproduce 4 block on the left. About block on the right which module i can use?
Thanks
Hi fabioweb90, you can use the flex block 1 or 2 -> https://i.imgur.com/d1vOAjD.jpg -> https://i.imgur.com/1mmSCW1.jpg -> https://i.imgur.com/zPcKqmn.jpg -> https://i.imgur.com/E8e02J1.jpg
Hope this will help you!
Thanks a lot. Now i have issue only between 767 and 1024px
https://ibb.co/MGGb6sf
There is a missing space and box on right is higher. How can i fix this?
Thanks
Hi,
The flex block can be edited per view port and you cloud adjust the flex height -> https://i.imgur.com/bkvBzR9.jpg
Hope this will help you!
Thank you!
Ok great. Now i have the last request for this section
As you can see in your demo https://ibb.co/6rV3KYR mobile in layout is different
https://ibb.co/QmYC7MB
In my version blocks have all the same width and height. How can i display like the demo?
The first one bigger and then the other 4 block displayed (2+2)?
Thanks
Hi,
That option is custom made of that grid, since you made your own layout you need t use a custom css to achieve that layout too and this is not quite easy.
I’m not sure exactly how to do it that i think that this custom css can help you
.td_block_14 .td-block-span6{
width: 49%!important;
}
.td_block_14 .td-block-span6:nth-child(even){
margin-left: 2%;
}
.tdi_37_bb9{
display: flex;
flex-direction:column-reverse;
}
Also is need for some more customization too.
Thank you for your understanding!
Thanks a lot =)
How can i add the same kind of background image opacity like we have in 4 boxes?
https://it.imgbb.com/
Regards
Hi,
Please try this custom css
https://i.imgur.com/elZNjG1.jpg
.td_module_flex_1 .td-module-thumb a:last-child:before {
bottom: 0;
content: "";
display: block;
height: 80%;
width: 100%;
position: absolute;
z-index: 1;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.7)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
}
Hope this will help you!
Hello i need another help if possible 🙂
Images if not set with same width/height are display in this way https://ibb.co/4Sq3N96
Is it possible to fix with CSS in order to display all in same way like now?
Regards
https://ibb.co/bXBd7fL
Hi,
Does that happen after using the codes from above? Or when does that happen exactly? All blocks and grids have responsive design by default, making modifications to them could cause problems.
Each block and grid (except flex blocks) will use a thumbnail specially created for it, so they will all be the same.
How can I see that issue happening exactly? So I can try and find what causes it.
Thank you!
Hello sure, you can see the issue on test website https://sviluppo.calcioinpillole.it/wp-admin/
as you can see there are some custom code blocks i made with Calin support..
Now images are all 682×440 and no error is displayed but if image have different width/height i got following issue https://ibb.co/4Sq3N96
Let me know if you have a CSS snippet for fit images to same widht and height
Thanks!
Hi,
Regardless of the featured image size you set, the theme will display a thumbnail resulted from that image – https://prnt.sc/udeobu This way all the modules of the same type are the same width and height by default.
If the original image is smaller than the thumb, the thumb won’t be created, but from what I can see that is not the case here.
Could you provide an example where I can see this happening so I can inspect it?
Thank you!
Hi,
Enter this code as well, and check again – https://prnt.sc/ue5s8v
.td_block_14 .td_module_mx1 .td-module-thumb .entry-thumb {
min-height: 138px;
}
Thank you!
Ok it’s better but images is not like background cover. It’s a bit stretched..
Hi fabioweb90, indeed setting the min-height will not be like a background cover, this is because the block is using a smaller image as thumb and not a background image to can be cover without stretching the image. Unfortunately the solution mentioned by Simion is the only one that can make the blocks bigger and work properly.
Also to make sure that all the images has the same thumb size, you can regenerate the images -> https://forum.tagdiv.com/thumbnails-fix-strange-looking-images-on-blocks/
Thank you for your understanding!