Empty space below content

Resolved Stephen de Vere
(@stephendevere)

10 years, 5 months ago

IMO there is a bit too much space generally between elements in the theme. That’s ok on Desktop and larger devices but as it’s now the small screens that dominates the user experience would it not be better to optimise for/towards the small screen user?

In particular: there is way too much empty space below post and page content (above footage widget area) to the extent that users viewing on smartphones are reporting to me that it is annoying to scroll down almost a full page of blank space before reaching the footer. This looks like it could almost be an error in the coding but if it’s deliberate is there a way I can reduce it with some custom CSS please?

Viewing 5 replies - 1 through 5 (of 5 total)

Moderator Kathryn Presner
(@zoonini)

10 years, 5 months ago

Sure, I’d be glad to help. I’ve taken a screenshot of the bottom of your homepage and labelled three areas – if you let me know which of the three areas you’re trying to reduce the size of vertically I’ll be able to provide some custom CSS for that:

If you’re seeing something else (I certainly don’t see an entire page’s worth of blank space) could you let me know:

– what specific device your affected user(s) are using (i.e. Nexus 7 or iPhone 6 Plus)
– what version of Android or iOS they are using (i.e. Android 4.4.4 Kitkat or iOS 8.1)
– what browser they’re using (i.e. Chrome, Safari, Firefox)

If I can replicate the issue I’ll be able to help more. Thanks!

Thread Starter Stephen de Vere
(@stephendevere)

10 years, 5 months ago

Hi Kathryn,

Thanks for your reply.

You’re right – it’s certainly not an entire page’s worth even on my little iPhone 4 /iOS 8 screen but does come across as unusual compared to most other sites. I wouldn’t call it a real issue, rather a design judgement and my target audience are not the types to have the latest smartphones.

If you could provide CSS code control for all 3 areas that would be wonderful but 1 and 2 are the main ‘problem’ for me.
I understand the basics of how CSS works, just not very good at finding the correct variables but once I have it I’m fine with tweaking a parameter.
Moderator Kathryn Presner
(@zoonini)

10 years, 5 months ago
This custom CSS should reduce the space in all three of those areas on small screens:
```
@media screen and (max-width:480px) {

  .footer-widget-area {
    margin-top: 0;
    padding-top: 10px;
  }
  #mc4wp_form_widget-5 {
    margin-bottom: 0;
  }
  .page .hentry {
    margin-bottom: 0;
  }

}
```
You can adjust any of the values from 0 or 10 as you like.

Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.
Thread Starter Stephen de Vere
(@stephendevere)

10 years, 5 months ago

Thank you Kathryn.

Moderator Kathryn Presner
(@zoonini)

10 years, 5 months ago

You’re very welcome. I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Empty space below content’ is closed to new replies.

Tags