Okay
  Public Ticket #2254956
Portfolio grids
Closed

Comments

  •  16
    Jen started the conversation

    I would love to be able to showcase my portfolios in a smaller size and wondered if there was any ability to use a 6 column grid rather than 3 or 4 as this makes the items quite large.

    Is there any CSS that could be used for this?


  •  3,023
    Andrew replied

    Hi Jen,

    Could you consider using the post grid element. Set the post type option to portfolio then in the column setting use 4. There is no option for 6. Then image size to small. 

    That's the closest look we can get to the 6 column grid.
    Hope this is a workable alternative.

  •  16
    Jen replied

    I already have it as a 4 column grid. I need 6 columns and want smaller images. Not sure what you mean below.


  •  8,992
    Tahir replied

    Hey,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks


    ThemeNectar Support Team 

  •  16
    Jen replied

    https://staging.selectwellness.com.au/services/


    Currently has a few portfolio widgets but all in 4 column grid

  •  8,992
    Tahir replied

    Hey AGain,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    body .portfolio-items[data-gutter="15px"][data-col-num="elastic"], body .portfolio-items[data-gutter="15px"] .col, body .portfolio-items[data-gutter="default"]:not([data-col-num="elastic"]) .col {
        width:16.66% !important;
    }

    Thanks


    ThemeNectar Support Team 

  •  16
    Jen replied

    Thanks that looks great. the only thing is that its not working on mobile view and is trying to maintain the 6 columns across (see attached image)



  •  8,992
    Tahir replied

    Hey Again,

    You can wrap it in a media query if you dont want the css to work on mobile : 

    @media (min-width: 690px) {
        body .portfolio-items[data-gutter="15px"][data-col-num="elastic"], body .portfolio-items[data-gutter="15px"] .col, body .portfolio-items[data-gutter="default"]:not([data-col-num="elastic"]) .col {
            width:16.66% !important;
        }
    }
    

    Best


    ThemeNectar Support Team 

  •  16
    Jen replied

    no joy on that for me :(



  •  8,992
    Tahir replied

    Hey Again,

    You need to remove the css earlier provided and add only the latest one.

    1. Please clear your cache using this guide: https://themenectar.ticksy.com/article/6226/ .
    2. If you are using WP Rocket use this guide :  https://docs.wp-rocket.me/article/108-render-blocking-javascript-and-css-pagespeed#critical-path-css .
    3. For Woocommerce caching issues see: https://docs.woocommerce.com/document/configuring-caching-plugins/ . 

    Best


    ThemeNectar Support Team 

  •  16
    Jen replied

    Ah cool that worked...


    Now lastly is there anyway to force it to display as 2 columns for mobile view instead of 1? It makes it all so big

  •  8,992
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (max-width: 690px) {
        .portfolio-items:not(.carousel) .col.span_4, .portfolio-items:not(.carousel) .col.span_3, .portfolio-items:not(.carousel) .col.span_6 {
            width: 50% !important;
        }
    }

    Thanks


    ThemeNectar Support Team 

  •  16
    Jen replied

    Awesome

    now just one more small issue

     Its showing in 2 columns now in mobile view but the row alignment is bad. Its behaving as if its in masonry style and the alignment is thrown out by some items having longer names. ie

    https://staging.selectwellness.com.au/services/



  •  8,992
    Tahir replied

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (max-width: 690px) {
        .portfolio-items[data-ps="9"] .col .work-meta {
            min-height: 50px;
        }
    }
    

    Thanks


    ThemeNectar Support Team