• I’ve been helping my brother with his photography site for a while and we’ve squashed a lot of anomalies along the way. But we’ve encountered a new issue with how the image thumbnails for the categories appear.

    When we had four posts for a category we were fine. Once he added another post, for the same category, instead of the thumbnail dropping into the next logical grid space, it dropped down and moved over three spaces. The next additional post mucked up the category spacing up even further. It dropped down another whole line

    If this sounds confusing, I’m sure when you see the page, you’ll see the problem:
    http://www.josephbrockphotography.com/category/family-sessions/

    What can I edit to get these extraneous gaps between category thumbnails to vanish? Something in the category.php file? Or the general stylesheet? If I need to provide more information to help devise a workaround, let me know.

    Thanks!

Viewing 15 replies - 1 through 15 (of 15 total)
  • Moderator cubecolour

    (@numeeja)

    This appears to be happening due to your theme not taking into account that some post titles may break onto two lines

    You can remedy this by giving all of the titles the same height using the following CSS rule in a child theme or added to the CSS rules in a custom CSS plugin (such as the custom CSS module of JetPack):

    .sidelist h2 {
    	height: 3em;
    }

    You may need to experiment with the value of the height a little, but this should be a starting point.

    Thread Starter kevincbrock

    (@kevincbrock)

    So sorry for the delayed response! I’ve been mired in a terrible family tragedy for months…

    So I’ve tried tweaking the style.css file, in the “sidelist” area, but for some strange reason the alterations don’t seem to affect anything. Not sure what I’m missing.

    The pertinent chunk seems to be here:

    /* Category */
    .sidelist {
    }
    .sidelist h1 {
    	padding-bottom: 20px;
    }
    
    .sidelist .post {
    	width: 220px;
    	float: left;
    	text-align: center;
    	padding-right: 10px;
    	padding-top: 20px;
    	padding-bottom: 20px;
    }
    .sidelist .post h2 {
    	font: normal 2.2em "Lobster", Arial, Verdana, Helvetica;
    	padding-top: 10px;
    }
    .sidelist .post h2 a {
    	text-decoration: none;
    }
    .sidelist .post .date {
    	font-size: 1.3em;
    }
    .sidelist .cat-desc {
    	font-size: 1.3em;
    	line-height: 1.2em;
    	padding-bottom: 10px;
    	line-height: 1.4em;
    }

    What could I be doing wrong?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin http://wordpress.org/plugins/custom-css-manager-plugin

    Then use its “CSS Code” section of the dashboard to hold your CSS modifications:

    .sidelist h2 {
        min-height: 3em;
    }

    Thread Starter kevincbrock

    (@kevincbrock)

    Thanks for the input! But I’ve modded the CSS many times before by going to Appearance > Editor and tweaking it there. Update the file, refresh the page in question: Boom, it’s changed. Not sure why it doesn’t seem to be working under these circumstances.

    Here’s the page that I’m trying to modify (to remove the uncalled for ‘gaps’ in the flow of the content.) http://www.josephbrockphotography.com/category/family-sessions/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Double check where you’re making the change. It’s not there http://www.josephbrockphotography.com/wp-content/themes/bigsquare/style.css

    Thread Starter kevincbrock

    (@kevincbrock)

    Wow, that’s bizarre! I don’t know what’s going on here. But you’re right. I’m editing the CSS the same way that I have many times in the past, in the Dashboard’s Appearance > Editor > Stylesheet (style.css) area.

    But even after I update this file, WP says “File edited successfully”, but when I refresh the css file page, that you linked to: http://www.josephbrockphotography.com/wp-content/themes/bigsquare/style.css” the edits do not show up. Something is odd.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Do you have any caching plugins?

    Thread Starter kevincbrock

    (@kevincbrock)

    No, I have no caching plugins.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Could you check with your hosting providers whether they are caching your site?

    Thread Starter kevincbrock

    (@kevincbrock)

    Yes, that was I was thinking, maybe the host is doing something unexpected on their end. I’ll check with them later on today. I truly appreciate your input thus far! I’d love to get this sewn up soon.

    Thread Starter kevincbrock

    (@kevincbrock)

    So, your suspicions were correct. The host had caching turned on, so that explains why my edits were not visible. I now know how to turn the caching on and off. I think’s it still cached now, but that should “wear off” soon. I’ll have another go with this later on tonight. Thanks again for your help thus far. (And to cubecolour as well.)

    I’ll report back as I know more.

    wp_noobster

    (@wp_noobster)

    Last-Modified time for style.css says:
    Thu, 12 Dec 2013 17:13:15 GMT

    if it’s not cache related, you could try to edit the file by hand (FTP download, modify, updolad)

    Thread Starter kevincbrock

    (@kevincbrock)

    Yeah, I asked the tech. support if I could bypass the caching by using FTP and modifying the css file directly. Essentially, when caching is turned on, it won’t matter. This roundabout method of editing won’t gain me anything when caching is enabled. Thanks for the idea though.

    So, for now, I’ve made the suggested code insertion:

    .sidelist h2 {
        min-height: 3em;
    }

    It works in closing up all those line-break gaps. Hooray. However, it introduces additional spacing that I’d like to clean up. Now, when there’s a single-lined title, there’s a big gap between it and the date. Before, the date was right underneath the title, even if the post title only spanned one line.

    This is sort of a frustrating push-&-pull experience. We’ve pushed one thing into order, and pulled another item out of wack. I can’t seem to get the proper compromise of nicely-spaced text lines without introducing that silly line break because of the double-lined titles.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    cubecolour posted a workaround because your theme hasn’t been built properly, the proper solution would be to wrap a <div> element on each row of 4 photos and that should resolve the issue. But the theme you’re using is not one we support, we only support the ones from WordPress.org. It’s fine to help you with CSS modifications, but ultimately you need help from your theme’s vendors with this.

    Thread Starter kevincbrock

    (@kevincbrock)

    Thanks for all the hints. Yeah, this theme is quite old now. And it was free, so you often get what you pay for. In fact “wordspop” is not what it once was. Whomever has that name now is certainly not dealing with WordPress themes.

    And since this is really under the wordpress.org jurisdiction, I (and my brother—whose site this is) really appreciate all the efforts thus far. I’ll just have to keep tinkering with it and see if I can strike the right compromise. Fixing one thing, breaks another. But that’s sorta been the story of this theme the whole time.

    Cheers!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Big (unexpected) space between category thumbnails’ is closed to new replies.