Remove Padding on Landing Page Template

Community Forums Forums Design Tips and Tricks Remove Padding on Landing Page Template

This topic is: not resolved

This topic contains 8 replies, has 2 voices, and was last updated by  mediaguru 11 months, 1 week ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #84255

    CaseyKt2013
    Member
    Post count: 21

    Hello,

    I have a question about using the landing page template with the metro-pro theme. I don’t want a big white area on top (where the header would normally be) – how can I get rid of it? This isn’t normally how I would set up a site – but the page is temporary and I need to work with the design I’ve been given.

    Here is the link: http://dsadvice.webcopyresults.com

    Thanks!

    http://dsadvice.webcopyresults.com
    #84259

    mediaguru
    Participant
    Post count: 56

    You need to modify the style sheet.

    1. Open up the style.css in a text editor
    2. Find the <div class=”site-container”>
    3. Modify the Margin and Padding(s) to suite your taste.

    Margin Default is 32 px
    Top Padding Default is 36 px

    Reducing these (2) variables will remove the “white border” area at the top.

    If your using Firefox (install the Firebug plugin) then you can view this by Inspecting the Element and Layout of the Page
    This also lets you make adjustments to test w/o affecting your code.

    Hope this helps.

    #84260

    CaseyKt2013
    Member
    Post count: 21

    Let me try that again – I did try to reduce both to 2 px originally, but no luck…

    (Sorry, I should have spelled out the edits I had tried already).

    Let me see if I didn’t save or something.

    #84261

    CaseyKt2013
    Member
    Post count: 21

    Here is the code:

    /* Site Containers
    ——————————————— */

    .site-container {
    background-color: #fff;
    margin: 5px auto;
    margin: 3.2rem auto;
    max-width: 1140px;
    overflow: hidden;
    padding: 5px;
    padding: 3.6rem;
    }

    Wasn’t sure if I needed to tweak the margin: 3.2rem auto and padding: 3.5rem as well?

    #84265

    mediaguru
    Participant
    Post count: 56

    OK… I see your issue.

    The Site container is Auto and that one line is controlling Top and Bottom Margins….which are both set to 3.2 REM (32 px)
    If your ok with adjusting both the same, then reduce that value.

    Otherwise: You may need to remove the Auto and set your Margins independent. Top, Bottom, Left Right.

    May need to adjust Padding REM the same way.

    Hope this helps.

    #84267

    CaseyKt2013
    Member
    Post count: 21

    I’m not sure I am following what you mean – can you please show how you would tweak it? (Am I only making changes to the code I provided above – or elsewhere? What values do you recommend I use and where?)

    Thanks!

    #84268

    CaseyKt2013
    Member
    Post count: 21

    Okay, I made adjustments and it helped – but I still have a narrow band of white on top of the image. Could that be controlled by styling the landing page itself?

    • This reply was modified 11 months, 1 week ago by  CaseyKt2013.
    • This reply was modified 11 months, 1 week ago by  CaseyKt2013.
    #84271

    CaseyKt2013
    Member
    Post count: 21

    Nevermind – caching issue – got it.

    Thanks!!!!!

    #84273

    mediaguru
    Participant
    Post count: 56

    Glad that fixed for you. Yeah the caching issue can catch you….it’s bit me more times than I can count LOL

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

You must be logged in to reply to this topic.