Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Weird padding/margin in blog post grid

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #272700
    beginnersmind
    Participant

    Hi everyone,

    The blog page on my site has an option for a “grid view”, meaning it displays the latest posts with an image and a small excerpt + a “read more” link below. You can see it here (scroll down a little): http://www.irisbarzen.com/

    Since I started adding custom CSS to the site it has started looking weird. Initially it used the h5 parameters where the font is way too big now. So I changed the class and gave it a better font-size, line-height and a padding and margin of zero.

    The text looks okay now, but it’s still weirdly displayed with way too much space between the excerpt and the link.

    Can you help me out? Thanks a lot.

    #272701
    Paulie_D
    Member

    You have these two rules in the CSS

    .block-article .read-more {
        margin-top: 3em;
    }
    
    article .read-more {
        margin-top: 2em;
    }
    
    

    I’d suggest removing them, or at least making them significantly smaller.

    I’d recommend familiarising yourself with the Developer tools that come with your browser so you can review what rules are applying and turn individual properties on and off.

    #272814
    beginnersmind
    Participant

    Thanks! I tried changing both margins, but couldn’t see a change. I’m DIYing everything, so I know how to use the inspect element tools, but sometimes I don’t understand what shows up.

    #272817
    Paulie_D
    Member

    Hmmm…works for me.

    Before Image:

    https://imgur.com/aFw6vCz

    After Image:

    https://imgur.com/kxMmWFz

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design’ is closed to new topics and replies.