Enfold - Change number of portfolio columns depending on screen width - Support

Tagged: columns, enfold, Portfolio, resolution, stretch, thumbnails, width

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
July 12, 2014 at 2:21 pm #290440

mattock
Participant

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

July 13, 2014 at 4:52 am #290713
Ismael
Moderator
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
July 14, 2014 at 2:28 pm #291057
mattock
Participant
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
July 15, 2014 at 5:41 pm #291715
Dude
Participant
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
July 15, 2014 at 10:04 pm #291844

mattock
Participant

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

July 18, 2014 at 3:18 am #292779

Devin
Inactive Moderator

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

July 18, 2014 at 6:00 pm #293068

mattock
Participant

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
Author

Posts