[Resolved] Conditional view

[Author]

Posts

[bouchairY]

Hello Minesh

Can you help me to add the code, I dont' know what happened, i don't found the code you added to my website !
Thank you in advance and sorry

[bouchairY]

Hello
I have added code provided and it is hidding and showing items as it must but adding the css below dont remove empty offer item
(please see atatched image)

.projects_holder article .portfolio_description {
    padding: 16px 12px 18px !important;
    margin: 0 2px 0 0;
        margin-bottom: 0px;
    background-color: #fff;
    text-align: center;
    min-height: 90px !important;
    margin-bottom: 12px !important;
}

Thank you

[bouchairY]

Hello
Test here :
hidden link

Thank you

[Minesh]

Well - what condition not working for you?

Could you please share problem URL and access.

[Minesh]

Ok - I've corrected the view output.

[bouchairY]

Hello
How have you corrected because i have 3 others views, i want to apply them correction
Thank you

[Minesh]

Remove the div (start and end) from your view output section:

<div class="row no-gutter"> 
......
</div>

[bouchairY]

Hello
I try to apply the same code for :

hidden link
hidden link

But not working, what I'm doin wrong ?

Thank you

[Minesh]

I've added following CSS code to your view's loop output editor's CSS box:

.projects_holder .col-sm-4 {
	min-height: 450px;
}

With Bootstrap the columns needs to have the same height otherwise it will create this empty space.

[bouchairY]

Hello
And for this one :

hidden link

The last item is not displayed :
hidden link

Thank you

[Minesh]

Well - I see it's using infinite scrolling and I see each time I scroll and pagination displays correct results.

More important thing is all issue which you reported is CSS customization issues that you need to take control on as CSS is not added by Toolset. You must know how to customize your loop output using CSS.

[bouchairY]

Hello
Another problem is that margin between items are big than original
please see original margin here :
hidden link

How can I reduce this margin ?

When you see in mobile view the images are very small comaparing to the original ones

Thank you

[Minesh]

Again I've adjusted the CSS as given under:

.projects_holder .col-sm-4 {
	min-height: 450px;
    padding-left:1px !important;
    padding-right:1px !important;
  
}

[bouchairY]

Hello
After you have removed :

<div class="row no-gutter"> 
......
</div>

There are many problems

Examples on :
hidden link
hidden link

The code below not working

.projects_holder .col-sm-4 {
    padding-left:1px !important;
    padding-right:1px !important;
}

Also on mobile, the layout is not correct !

Thank you

[Luo Yang]

Hello,

Minesh isn't available currently, you will get the answers soon when he is back.