[Resolved] Hide the third columns on small screens

[Author]

Posts

[Pete]

Hi Jamal,

Thank you for that however I never knew that was there, I didn't know there was an override setting in Elementor that affected Toolset. I know now 🙂

Ok, I added this to get the row down to 2 columns for table so I now have: <div class="col-sm-4 col-sm-6">

Works great however I can remember a method of stopping the third item wrapping round underneath, however I can't find this.

I already have this and tried to adapt it however no joy:

@media (min-width: 625px) and (max-width: 1580px) {
.row-family .col-sm-4:nth-child(n+4) {
display: none;
}
}

@media (min-width: 625px) and (max-width: 1580px) {
.row-family .col-sm-4 {
width: 50%;
}
}

Any ideas please?

[Jamal]

I am not really sure how to do it on CSS. But you can use Bootstrap responsive classes such as "hidden-sm" and similar check this section of bootstrap documentation hidden link

As you are using the wrap attribute of wpv-loop and the index attribute of wpv-item, I suppose you can add the bootstrap responsive utilities to hide the 3rd column on small screens:

		[wpv-item index=3]
			<div class="col-sm-4 col-sm-6 hidden-xs hidden-sm">[wpv-post-body view_template="loop-item-in-related-lakes"]</div>
		</div>

Please test it and let me know if it helps.

[Pete]

Hi there,

Ok, well I added your suggestion and I checked out the docs link. I've added hidden-md to try and hide this third column on smaller PC screens, which helped however there seems no setting for 1280 x 768.

It feels like this needs a CSS option as the resolution this is missing is a popular media query and curious why BS hasn't covered this. Unless I'm doing something wrong?

<div class="row-family">
<div class="col-sm-4 col-sm-6">[wpv-post-body view_template="loop-item-in-related-lakes"]</div>
[wpv-item index=other]
<div class="col-sm-4 col-sm-6">[wpv-post-body view_template="loop-item-in-related-lakes"]</div>
[wpv-item index=3]
<div class="col-sm-4 col-sm-6 hidden-md hidden-xs hidden-sm">[wpv-post-body view_template="loop-item-in-related-lakes"]</div>
</div>

[Jamal]

Bootstrap is trying to adopt the mobile-first approach, default styles are applied to the small screen supported, then using media queries, bootstrap provide additional styles for bigger screens.
hidden link

Check the grid options(screen sizes) of bootstrap CSS here hidden link

You may fix this by using the ".visible-md-*" ".visible-lg-*" classes instead of the ".hidden-xs-* .hidden-sm-*" classes.

I am sure, you will understand, that this is a question related to Bootstrap CSS rather than Toolset. As Toolset supporters, we can give some guidance on how to use Bootstrap, we may also provide solutions when it is simpler, but we can't build custom solutions for our customer.
If you are not comfortable with technical skills(CSS, Javascript, PHP), you can take this question to a general support website such as StackOverflow or consider hiring a developer or one of our partners https://toolset.com/forums/forum/professional-support/

[Pete]

My issue is resolved now. Thank you!