Shrink Circles

I seriously cannot figure this out. any help would be appreciated. Am i really the only person who is looking into to re-sizing the circles?

I know i’m not supposed to bump (sorry in advance) this is my last step before I can complete the style and I just can’t figure out how to make the circles smaller without breaking them one way or another.

A link to your site would make it much easier for someone to help you…

Can you give an example of the CSS have you tried so far?

Site

^^link to site

This is the page with my circles… (only 1 atm as in testing the sizes)

Honestly I don’t have the list of everything i’ve tried but its all been to do with the shapes in CSS. i tried to get a different shape. gave up and decided actually wanted smaller circles.

it was all to do with the .hentry.no-thumbnail and .hentry entries in CSS code.

I will try and go back through the stuff i’ve tried when I get home.

Any help you can give by looking at the site is greatly appreciated also.

Thanks

Can you reduce the element’s size just like any other element in CSS, through “width” and “height”?

Well i tried that on the parts I thought would work and it didn’t. some stuff i tried messed up the test/shape ratio and not sure why.

I will have to go through my browser history at work and see what pages i’ve been on and which posts i’ve read to get the full details on the things i’ve tried.

What would be best is to use “min-height” values so that when people resize the text alone, the circle resizes with it. Otherwise the white text will blend into the white background ??

For example:

.hentry.no-thumbnail,
.hentry.no-thumbnail span {
 height: auto;
 min-height: 90px;
 max-width: 90px;
}

By the way you have a syntax error at the bottom of your Custom CSS code which could explain why nothing was working (if you put stuff there). You need to close off your media query rule.
At the moment it is this:

@media all and (max-width: 480px) {
 body {
  zoom: 90%;
}

And it should be this:

@media all and (max-width: 480px) {
 body {
  zoom: 90%;
 }
}

Fixed the syntax error. Thanks for noticing that.

And holy crap I have a small circle!

Thanks so much.

Site

Circles look great now. However the text doesn’t fit them now. Is that just finding the text style in CSS and changing it’s size? last time i tried it didn’t stay centered in the circles.

Also the text won’t be white soon, and the circles will be the same texture as the background. I had a photo working at one stage so will get there again.

Thanks for the help andrew.

*edit*

Added featured photo and circle got bigger. am i missing a state?

Well I used this:

.blog .hentry a .attachment-post-thumbnail,
.archive .hentry a .attachment-post-thumbnail,
.search .hentry a .attachment-post-thumbnail {
 height: auto;
 min-height: 90px;
 max-width: 90px;
}

But as you can see its kind of weird on the hover over lol…

Also my Text has gone :(, and how can i reduce the spacing of the circles?

Any ideas?

that just finding the text style in CSS and changing it’s size?

Yeah, well it would be finding the text style using what ever method like using Firebug and then overriding that in your Custom CSS.

Added featured photo and circle got bigger. am i missing a state?

I can’t see your bigger circle.

But as you can see its kind of weird on the hover over lol…

I see. I think that’s because your “article” element still has a “height” of larger than “90px” and there’s a CSS style that says “height: 100%;” on-hover of your image.

So, to resolve that you’d override those styles, e.g:

.blog .hentry a:hover img,
.hentry {
 height: auto;
}

.hentry {
 min-height: 90px;
}

If you want to fit that in with the styles you have already, try doing this:

.blog .hentry a .attachment-post-thumbnail,
.archive .hentry a .attachment-post-thumbnail,
.search .hentry a .attachment-post-thumbnail,
.blog .hentry a:hover img,
.hentry {
 height: auto;
}

.blog .hentry a .attachment-post-thumbnail,
.archive .hentry a .attachment-post-thumbnail,
.search .hentry a .attachment-post-thumbnail,
.hentry {
 min-height: 90px;
}

.blog .hentry a .attachment-post-thumbnail,
.archive .hentry a .attachment-post-thumbnail,
.search .hentry a .attachment-post-thumbnail {
 max-width: 90px;
}