Reducing space or headroom between Front Page elements

Tagged: aspire, homepage, margin, padding, space, widgets

This topic has 6 replies, 3 voices, and was last updated 8 years ago by wizz3103.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
June 16, 2017 at 3:34 pm #21565
Tre
Customer
Hello Wes. I’m still hoping for some guidance to reduce blank space or headroom, whatever the technical term may be, between Front Page elements. I have Rev Slide in front page 1. Not using front page 2. A text box in front page 3.
How can I reduce white space, blank space or headroom between top of Front Page 3 and bottom of the slider in Front Page 1? This is on local host so no link is available. I do have a screen grab that I am not sure how to attach. Thanks
June 17, 2017 at 2:48 pm #21571
Wes
Moderator
Unfortunately there’s no way to tell where the issue is coming from exactly without a link to the site. If you can upload what you have to a temporary subdomain then I can check it out…..or just let me know when you have your site ready and I can check there.
June 17, 2017 at 3:44 pm #21577
Tre
Customer
I understand. May I ask, hypothetically, looking at the Aspire Pro Live demo,
how can I reduce the white space/headroom/ – may top margin of the text area within a front page area – between the orange/red box and the text line; “Get more Sales with a Killer Design!” and again at the bottom between the Apple, Paypal, etc logos and the black background of the next Front Page area?
Thanks for your time.

https://my.studiopress.com/themes/aspire/#demo-full
June 17, 2017 at 11:33 pm #21581
Wes
Moderator
That’s the front-page-3 widget/section and it’s controlled by the .flexible-widgets on line 1757.
```
.flexible-widgets {
    padding: 140px 0 120px;
}
```
This code also controls the padding/space on all of the other widgets, so if you change this directly, you’ll be changing all the rest of the widgets as well. If you just want to control the padding/space for this section alone, add something like this to your CSS –
```
.front-page-3 .flexible-widgets {
    padding: 80px 0 60px;
}
```
The 80px controls the top padding, and the 60px controls the bottom. You can decrease or increase them more if you need to.

Let me know if that helps.
June 22, 2017 at 10:20 am #21624
wizz3103
Customer
Sorry to butt in on this thread but I need to do the same. I swapped frontpage widget 3 with frontpage widget 4, so #4 now is directly under widget 2 (the enews). I have a large white gap at the top, and although I put in this code below, adding it in around line 1636, I don’t seem to have reduced the white space. Any further ideas? Do I need to do something with a .wrap or widget 2 – which I made full width and without a minus margin so it sits directly under the frontpage 1 header image.

I’ve a screengrab viewable here: https://creatistadesign.com/aspire-theme-issues/

.front-page-4 .flexible-widgets {
padding: 0px 0 10px;
}

Help much appreciated
June 24, 2017 at 4:16 am #21631
Wes
Moderator
@wizz3103 I can take a look but I would need a live link in order to see where the space is coming from (since a screenshot/image won’t be enough to see what’s going on underneath). Is the site live yet?
June 24, 2017 at 10:45 am #21640
wizz3103
Customer
Hi Wes,
Thanks for this and totally understand. It might be a month before it’s live so I’ll see if I can resolve it; if not, I’ll pop up here again! Thanks.
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.