WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Shrink Circles (10 posts)

  1. contagous
    Member
    Posted 10 months ago #

    How can i shrink the circles so can see many more on 1 page, while keeping them posting in order and the titles within them.

    If that makes sense.

    I have Custom CSS and a child theme setup so could use either or.

    Thanks for any help.

    See below for my examples, 2nd one is made in paint to show what i'm after.

    Screen 1. https://imageshack.com/scaled/large/17/v28.png
    Screen 2. https://imageshack.com/scaled/large/580/0dfu.png

    once i figured out the size thing, i will look into making them square also.

    Thanks again

  2. contagous
    Member
    Posted 9 months ago #

    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.

  3. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

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

  4. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 9 months ago #

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

  5. contagous
    Member
    Posted 9 months ago #

    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

  6. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 9 months ago #

    Can you reduce the element's size just like any other element in CSS, through "width" and "height"?

  7. contagous
    Member
    Posted 9 months ago #

    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.

  8. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 9 months ago #

    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%;
     }
    }
  9. contagous
    Member
    Posted 9 months ago #

    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?

  10. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 9 months ago #

    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;
    }

Reply

You must log in to post.

About this Theme

About this Topic