So much space after each content area- looks like lots of ::after

  • Resolved sailjumper

    (@sailjumper)


    5 years ago

    Is it possible to override ::after selectors?

    My page (on localhost right now) has a simple header, an image and then the bottom (which has too much white space, an HR, and then the footer.

    The Sketch theme adds 3 ::after selectors followed by an HR at the bottom of each content area. They appear to be the cause of a lot of unwanted space.

    Is there a way to get rid of them, without modifying their code? Can I do this with a bit of custom CSS?

    So at the end of the page above the footer it looks something like this:

    </div>
    </div>
    ::after
    </div>
    </div>
    ::after
    </div>

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • fresatomica

    (@fresatomica)

    Hi there!

    We can’t really advise without seeing the site. Would you be able to tell us exactly how you set up the page?

    Did you use the block editor? If so, what blocks exactly have you added there?
    What template did you use for that page?

    It would also be good if you could send us a screenshot of what you see on the front end and with the space you want to remove marked. You can use an online tool like snag.gy for that.

    We may try to help you that way although bear in mind that it may not be accurate.

    Thread Starter sailjumper

    (@sailjumper)

    Thanks for your help! I know it’s really hard without having the site live. I’d just rather have it working locally before putting it out on the web.

    So this is the default template. Extra space is on every page (including the Home Page) at the bottom before the footer and before the HR.

    so it goes like this….

    Some block (text, image, whatever)
    three blank lines
    HR

    I used Site Origin to set up the content within each page. There are no bottom margins, or extra padding in any of cells, rows or SO widgets.

    I don’t have a snag.gy account— How about this google.doc with a screenshot in it?

    https://docs.google.com/document/d/1rdM1LtO822elBNnep259YZcUlhsYgr1Xd9Gi60dtyEg/edit?usp=sharing

    NOTE: I added 2 pictures- the first one is just normal. The second one shows all the ::after lines by adding “test” as a comment to ::after.

    • This reply was modified 5 years ago by sailjumper.
    Thread Starter sailjumper

    (@sailjumper)

    I had to change the google docs link: Here’s the new one.

    https://docs.google.com/document/d/1JL1kQZv7g5cjtqPkGw3c0e7XC5qtDO2BZ8ha4vyaVKA/edit?usp=sharing

    Jarret

    (@jarretc)

    Hi, each article/post on Sketch has the following set

    .hentry {
  border-bottom: 1px solid #eeeeee;
  margin: 0 0 53px;
  padding: 0 0 27px;
  position: relative;
}

    Which is where all of that extra space is coming from as each post has 80px of padding/margin on the bottom. If you want to decrease that space, you can do something like this

    .hentry {
  margin-bottom: 0px;
  padding-bottom: 0px;
}
    Thread Starter sailjumper

    (@sailjumper)

    .hentry… …Perfect! That is exactly what I was looking for. Thank you so much.

    Thread Starter sailjumper

    (@sailjumper)

    Totally solved my spacing issue. Thank you very much. (marking resolved)

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘So much space after each content area- looks like lots of ::after’ is closed to new replies.