Jump to content
peters_publishing

Reduce space below Masthead

Recommended Posts

peters_publishing    0
peters_publishing

Hello! I'm trying to reduce some of the massive amount of whitespace between the Masthead section and the Highlight section on this page: http://www.skypeenglishclasses.com/payments/

 

I've tried using the suggestions here:

http://www.pagelines.com/forum/topic/21089-change-the-height-of-masthead-section/?hl=space+below+masthead

 

and here:

http://www.pagelines.com/forum/topic/21395-extra-lines-white-space-between-pageline-options-how-to-remove-it/?hl=space+below+masthead#entry124426

 

and a few variations on them, but without success.

 

 

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, for some reasons those older posts are adding the forum shortcode for the 'code' style box. If you ignore the beginning

and end

and just use the bit in the middle it should be fine.

 

#masthead .content-pad { padding: 0px;}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
peters_publishing    0
peters_publishing

James,

 

Thanks. I figured that and had already left those pieces of code out. 

 

I have kept this piece of the code;

.masthead {margin-bottom: 0px;}

And it does reduce the amount of space by a little, but not quite enough.

 

Paul

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi Paul,

 

What you will need to do is change the padding on the Highlight section. Inspect the Highlight section and then add custom CSS, to reduce the padding-top. This will resolve your website, using Firebug or your browsers web dev tool, you can do this very easily.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
peters_publishing    0
peters_publishing

Ok, I tried this:

 

.highlight-area {margin-top: 0px;}

 

And this:

#highlight-area .content-pad {padding: 0px;}

 

But they had no effect. 

Share this post


Link to post
Share on other sites
catrina    103
catrina

You need to add the selector #page at the beginning like this:

 

#page #highlight-area

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
peters_publishing    0
peters_publishing

Catrina,

 

 

Tried this:

#page #highlight-area .highlight-area {margin-top: 0px;}

 

And this:

#page #highlight-area .{margin-top: 0px;}

 

And this:

#page #highlight-area .content-pad {margin-top: 0px;}

 

No difference. Flushed the cash each time too. 

Share this post


Link to post
Share on other sites
James B    436
James B

Ok looking in firebug you'll see as you scroll over the html on the right hand side the areas which the padding/margins are applied to, they'll show as a dark blue border or a yellow block. When you see that appear you've on the right div you'll need to edit, so click on the div name in the html and you'll see the assigned css in the left hand screen in firebug. There you'll see the padding thats applied to that section you can edit.

 


#highlight .content-pad {padding-top:0px;}


#highlight .content-pad .highlight-area {
    padding: 0px;

}

"http://i.imgur.com/ju2cU.png"


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
peters_publishing    0
peters_publishing

Still nothing. When I look at it in Firebug, it appears that the Mast head is what is causing the problem, but none of the code changes I've made seem to change it.

Share this post


Link to post
Share on other sites
James B    436
James B

In that case I'd suggest going through any other css you have in the css box and double checking it for errors, anything broken above will stop any css below from working.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
peters_publishing    0
peters_publishing

James,

 

Thanks, your fix actually did the trick, combined with the changes I made to the masthead... I didn't see that it was working until I cleared my browser cache (facepalm). 

 

Paul

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • StuLeeUK
      By StuLeeUK+
      Good morning,
      I have set up my homepage using the Elements sections, a Masthead at the top and then a selection of Heroes lower down.
      I only just realised that the Heroes set a H1, as does the Masthead.
      Is there an easy way I can change the Heroes to an H2/H3 etc so as to improve the structure of my headers, whilst keeping the Masthead as H1?
      I really don't know much at all about CSS, which is why I use Pagelines because it's just so easy to create good looking pages without too much confusion.
       
      page for reference is https://www.avangocouriers.co.uk
      Thanks,
      Stu
    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      we have noticed that the Elements section is displaying incorrectly under IE11 on Windows 10. See xiting.us. The 3 sections above the footer are Elements sections and they have way too much spacing.
      Is this a known issue?
      Thanks
      Michael
    • chamois_blanc
      By chamois_blanc+
      Hello,
      I am a bit confused about the usage of percentages for section padding/margin settings in the PL5 UI. Percentages don't scale well for mobile devices (especially in height), so those settings are pretty much useless. Case in point, the defaults are expressed in rem units, not percentages:
      .pl-sn-pad { padding: 1rem; ... } Why force the user to use percentages in the PL5 section UI when it would have been as easy to let the user specify the unit?
×