[3rdBardo]

Hi,

Is there a way of changing how many items are displayed in a row for the Portfolio page?

At the moment, there’s 5 items but they look rather small. I’d rather have slightly larger images and fewer items per row. 3 or 4 larger div containers per row would be better.

Does anyone know of a way to do this?

Thanks in advance,

Zain

[Mehmet S.]

Can you provide your url?

[3rdBardo]

Yeah sure. I’ve reduced the site size down to the bootstrap 940 dimensions, so now there’s 4 items per row, however 3 per row would be a bit better.

Here’s the url of the development site:
http://dev.knowledgeconstructs.com/portfolio/

Thanks for any tips, in advance!

[Mehmet S.]

So go ahead in the same way to make it 3 columns.

[3rdBardo]

Hi,

Still have a bit of an issue – simply changing the width of the isotope item makes the items overlap, instead of the last one floating to the next row.

I’m currently using:

#portfolio .item { float:left; width:300px; }

…taken from main.css (around #437), with the width adjusted from 210px to 300px, but the result isn’t quite as expected. See: http://dev.knowledgeconstructs.com/portfolio/

Any ideas about how I can adjust the isotope-item, so that the widths get wider, and there’s 3 items on the full-width Portfolio page?

Thanks again, in advance for any suggestions. A bit stumped on this one… :$

[3rdBardo]

…ignore my last comment! DOH!

I just found that the overlap seems to be due to the main isotope.js being cached, and the browser using dimensions that were stored.

I simply forced the page to clear the cache (Shift + Reload), and the new dimensions now work. There are now 3 items per row! Woohoo!

I hope this thread helps someone else…

Thanks! :)

[3rdBardo]

Additional note on setting Portfolio rows per line…

I’ve just found that simply adding an extra style for “#portfolio .item” in an *external* stylesheet will not work.

You will need to change Line #430 in main.css from
#portfolio .item { float:left; width:210px; margin-left:30px; margin-bottom:40px; }
to
#portfolio .item { float:left; width:295px; margin-left:30px; margin-bottom:40px; }

in order to get 3 rows appearing in a 940px width version of Bootstrap.

The reason for this is that the external style only kicks in on a page reload. The first time the portfolio is loaded, it will use the 210px style as the default. But using Shift+Reload will then change it to 295px. The initial page load is what’s important.

Is there any way that this default width for portfolio items could be set in the Responsy theme settings? This would mean that line #430 is removed from the main.css and then added later in the Header styles.

Just a thought, but it would be very useful.

Thanks again!

[Mehmet S.]

Thanks.