Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #290440

    Hi, I’ve just updated my Enfold which made most of my portfolios stretch full screen width, I like it and want to keep it but have a question.

    When viewing my home page portfolio http://www.davidmattock.co.uk on my large screen 1920 x 1080 the thumbnails at 4 columns were too big so I changed it to 5 columns which looks great. But my problem now is on smaller res screens or ipads in landscape 4 columns look much better as 5 is too small.

    Is there a way to get it to change from 5 cols to 4 when viewed on a smaller and not as wide format screen ?
    Many thanks

    #290713

    Hey mattock!

    Thank you for visiting the support forum!

    Add this on Quick CSS or custom.css to adjust the width of the portfolio items on iPad view:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    #top .grid-sort-container .no_margin.av_one_fifth {
    width: 25%;
    }
    }

    Great work! Love the portfolio.

    Best regards,
    Ismael

    #291057

    Hi Ismael thanks for the quick reply and comments on my portfolio, I just tried this but cant get it to work, have I put it in the wrong place in my custom.css ? heres my code, i put it directly underneath the style that is already there

    Desktop Styles
    ================================================== */
    /* Note: Add new css to the media query below that you want to only effect the desktop view of your site */
    
    @media only screen and (min-width: 768px) {
      /* Add your Desktop Styles here */
      /* chnage height of fullwidth slider */
    .avia-slideshow-inner {
    height: 350px !important;
    }
    .caption_container{
    height: 350px !important;
    }
    
    }
    
    @media only screen and (max-width: 989px) and (min-width: 768px) {
    #top .grid-sort-container .no_margin.av_one_fifth {
    width: 25%;
    }
    }

    If I put it within the first style it changes it to 4 columns but on everything ?
    Apologies for my lack of knowledge on this, thanks

    #291715

    Hey!

    Please try this code:

    
    @media only screen and (min-width: 767px) {
      /* Add your Desktop Styles here */
      /* chnage height of fullwidth slider */
    .avia-slideshow-inner {
    height: 350px !important;
    }
    .caption_container{
    height: 350px !important;
    }
    
    }
    
    @media only screen and (min-width: 768px) and (max-width: 989px) {
    #top #wrap_all .grid-sort-container .av_one_fifth {
    width: 25%;
    }
    }
    

    If it still doesn’t work try to increase the max-width value – i.e. set it to 1024px or 1280px.

    Cheers!
    Peter

    #291844

    Amazing thanks that works now !

    One issue I’m not sure is possible to do, is I have a one row portfolio on all portfolio item project pages showing related projects just in one single row underneath. So now when it changes to 4 columns on smaller screens it puts the 5th thumbnail underneath forming two rows.

    Is there any way to force it to only ever have one row for these related project portfolio grids?. so on larger screens the single row and 5 columns , and smaller screens switches to 4 columns and puts the 5th on a next page instead of underneath, many thanks again

    #292779

    Hi!

    No unfortunately not. The content that is shown can be displayed and manipulated but it would need to reload from the server to change the current visible content.

    Best regards,
    Devin

    #293068

    Ok no worries thanks for all the great support !.
    I might go back to the standard one row of 4 not using the stretched function just for these related project portfolios, as it looks weird having that one thumbnail on its own.

    But Ill keep it for the home page which looks great, thanks again

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Enfold – Change number of portfolio columns depending on screen width’ is closed to new replies.