More space between portfolio thumbs « Support Forum | Kriesi.at

Support Forum » Angular

More space between portfolio thumbs

21 posts from 3 voices

Started 6 months ago by maustnes
Latest reply from Nick
This topic is not resolved

Tags:

maustnes
Member

Hello.

I want the portfolio thumbs to be smaller and have a bit of space between. How do I do this?

Posted 6 months ago #
Ismael
Moderator
Hi maustnes,

Kindly add this code in your Quick CSS or custom.css:
```
.post-entry.flex_column.no_margin.one_fourth.portfolio-entry-description.isotope-item {
   width: 23% !important;
}
```
Just adjust the width value. :) The default is 25%.

Hope this helps. :)

Regards,
Ismael
Posted 6 months ago #
maustnes
Member

That solved one of the problems. All the thumbs got smaller but the space between is the same. Do you now how to fix this?

Posted 6 months ago #

Ismael
Moderator

Hi maustnes,

Try to add this code:

.post-entry.flex_column.no_margin.one_fourth.portfolio-entry-description.isotope-item .inner-entry {
   margin-right: 5%;
}

or this code, if the code above doesn't work:

.post-entry.flex_column.no_margin.one_fourth.portfolio-entry-description.isotope-item .inner-entry {
   margin-right: 5% !important;
}

Regards,
Ismael

Posted 6 months ago #

maustnes
Member

Thanks! That worked great.

Posted 6 months ago #
maustnes
Member

Just nitpicking. The images change size one second after they have been loaded. Is there a fix for this?

Posted 6 months ago #
Ismael
Moderator

Hi maustnes,

I'm not sure how to remove that. Let me tag the rest of the team, they might know how to fix that.

Regards,
Ismael

Posted 6 months ago #
maustnes
Member

Great. Thanks.

Posted 6 months ago #
Nick
Moderator
Hi,

Please add this to quick CSS
```
.slideshow.fade_slider {
height: 191px !important;
}
```
Please let us know if this took care of the issue.

Thanks,

Nick
Posted 6 months ago #
maustnes
Member

Hello, Nick.

That didn't work. You can head over to http://www.wibe-music.com to see the effect. It seems like this controls the image inside the <div>. It's the <div> witch contains the image I want to stop shifting. Appreciate the efford.

Posted 6 months ago #
Nick
Moderator

Hi,

I didn't see the code I gave you being included in quick css or custom.css and applied. So the height of the initial image being shown is still not height 191 but instead is 30px more. Please leave the code in, so I can see why its not working or make the next step to get it there.

Thanks,

Nick

Posted 5 months ago #
maustnes
Member

Sorry. I cut out the code from the quick css. Now it's in place.

Posted 5 months ago #
maustnes
Member

The reason I cut the code from quick css was because the image in the portfolio (big picture) didn't show up as it's supposed to. Only the top portion of the picture shows.

Posted 5 months ago #
Nick
Moderator
Hi,

I see what you mean. Sorry about that. Please delete the previous code and instead try the one below. Please don't take the !important off since we are trying to override inline css here.
```
#top .one_fourth .slideshow{
height: 191px !important;
}
```
If that doesn't do the trick, please take off this plugin and see if that makes a difference http://maps.gstatic.com/cat_js/intl/en_ALL/mapfiles/api-3/10/17/%7Bmain,panoramio%7D.js

You are also using a second ajax loader on that page http://www.google.com/jsapi?ver=3.4.2 ... It wants an API key. and for now please take it off.

***this may be the issue below***
Your images are also 465x465, and are 191x191 on the main page. For some reason though the code has 465 everywhere. When you add the image , are you selecting 119x119 or are you selecting maximum size (radio buttons should give options to select one of many sizes)

Thanks,

Nick
Posted 5 months ago #
maustnes
Member

This is really strange. I've disabled all of the plug-ins, copied the original code from functions.php back to the page but the shift is still there. Any idea?

Thanks again, Nick.

Posted 5 months ago #
Nick
Moderator

Hi,

If you refer to this thread http://www.kriesi.at/support/topic/portfolio-pages-are-jumping ... we discussed the issue, and are looking into why a small number of websites exhibit this event and what combination of plugins causes it. This issue , I can not replicate. However if you redo the setup of the theme on a subdomain and create the portfolio first, it will work and as you add your plugins and customization, keep an eye on the portfolio page, and at some moment you will see the culprit and substitute/remove it.

Thanks,

Nick

Posted 5 months ago #
maustnes
Member

Ok. I will try that. Thanks.

Posted 5 months ago #
maustnes
Member

I wasn't refering of the whole page jumping. It is just the portfolio pictures witch are at first "full size" and then zooms into the right size. You can see it over at http://www.wibe-music.com.
I just want the portfolio pictures to be loading in the same size as they appear after they load.

Thanks agin, Nick.

Posted 5 months ago #
Nick
Moderator
Hi,

If you remove this CSS that should be in your Quick CSS, everything should be normal. I think you were trying to add some space.
```
.post-entry.flex_column.no_margin.one_fourth.portfolio-entry-description.isotope-item .inner-entry {
margin-right: 15%;
margin-bottom: 15%;
}
```
You can go back to using the big original images as well. Please install http://wordpress.org/extend/plugins/simple-image-sizes/ this plugin, and before you upload, go into Settings > Media and change the portfolio image size to be proportionally smaller.

Thanks,

Nick
Posted 5 months ago #
maustnes
Member

Ok. Maybe this is my fault. I'll try to explain a bit clearer.

I want the image size to be smaller - and the space between each portolio thumbnails to be larger then the original theme. I'm happy with the way the front page displays after the page loads completely. The problem is before it loads completely. The images, or rather the image borders are bigger when the page loads as they are when the page is loaded completely. I don't want that effect to take place. I want the images/border/container to load in the same size as they are shown after the load.
You can visit http://www.wibe-music.com to see the effect or see the screenshots here:
http://www.wibe-music.com/shift/1.png
http://www.wibe-music.com/shift/2.png

Posted 5 months ago #
Nick
Moderator

Hi,

I understand the problem well. I also understand what is causing it and what you are trying to do , but are going about it the wrong way which is why there is that jump. Please refer to my other post on a different thread ( http://www.kriesi.at/support/topic/information-when-hovering-thumbnails?replies=4#post-86012 ) about my proposal to you to take care of all these issues once and for all.

Thanks,

Nick

Posted 5 months ago #