Filter cropped

[applemint]

Hi,

I have Air WP theme.
On the portfolio Work page, “Page Template” is set to “Introduction in List”. I like the composition of the grid this way, but it has one issue. The Filter is sometimes cropped, depending on the width of the browser. Is there a way to prevent this? I will supply screenshots.

Thank you

[applemint]

This reply has been marked as private.

[SeaTheme]

Hi,

For this layout, it is not fit too many information, there are not enough space.

You could adjust the line-height and margin CSS:

.filter-in-grid .filters {line-height: 30px;}
.filter-in-grid .filters { margin-top: 0px; margin-bottom: 0;}
body.page #content_wrap .ux-portfolio-template-intro.grid-inn-con p {
    margin-bottom: 10px;
    line-height: 20px;
}

Regards

[applemint]

Thank you for the code. Yes, that helps reduce cropping.

I further added code to remove right margin of entire container and remove padding-top from intro. Is this correct?

.container-masonry:not(.container) .filter-in-grid .grid-item-con{
	padding-right: 0;
}/* remove padding-right of container text + filter */
.filter-in-grid .filters {
	line-height: 30px;
	margin-top: 0; 
	margin-bottom: 0;
}/* Filter */
body.page #content_wrap .ux-portfolio-template-intro.grid-inn-con p {
	margin-bottom: 30px;
	line-height: 20px;
	padding-top: 0;
}/* intro */

also, if possible, what would be the best way to have a larger margin-bottom for intro at wider browser width and reduced margin-bottom at narrower browser width? In other words, to have white space between intro and filter be adaptable based on browser width? It looks a little odd now at larger width.

Many thanks!
Regards

[SeaTheme]

Hi,

Yes, I found the css works on your website.

You could use @media for big screen like:

@media (min-width: 1500px) {
    
  .filter-in-grid .filters {
	line-height: 30px;
	margin-top: 0; 
	margin-bottom: 0;
  }...

}

Regards

[Author]

Posts