Home Forums Air WordPress Theme Filter cropped

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #23936
    applemint
    Participant
    Purchased
    Supported

    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

    #23937
    applemint
    Participant
    Purchased
    Supported
    This reply has been marked as private.
    #23940
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    #23943
    applemint
    Participant
    Purchased
    Supported

    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

    #23948
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!