Excess spacing between text and top image

  • Resolved lisakaye

    (@lisakaye)


    8 years, 8 months ago

    I have been trying for 3 days to reduce the space between the text and featured image (or rather a slider which I’ve replaced the image with). The page title appears below the slider but then there is a huuuuge gap before the start of the text. I have tried AT LEAST 15 different CSS code snippets that I’ve found during my research but unfortunately nothing has worked. (I’m a graphic designer and not a programmer so my coding knowledge is limited to what I can copy and then easily modify for my needs.)

    The development site is at https://www.kdesignhouse.co.za/clients/keystone/about/

    Please note that I am using the Goran theme (which is a child of Edin) and I did originally post in that support forum but haven’t had a response as yet. Due to my absolute desperation I thought I’d try the Edin forum – hope that’s ok.

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

  • Hi Lisa,

    You can achieve what you’re after by adding following custom CSS to your theme using Advanced CSS Editor:

    .content-area{
    padding-top: 0px;
}

    If you want it to be specific to the “about” page, you can use this code instead:

    .page-id-2 .content-area {
    padding-top: 0px;
}

    Hope it helps.

    Thread Starter lisakaye

    (@lisakaye)

    Suyogya, you are an absolute lifesaver! Thank you so much for your help – it works perfectly. Very frustrating that it’s seemingly such a simple solution and I was trying to use very complicated CSS to no avail! Thank you again.

    Hey Lisa,

    Glad I was able to help. Cheers ??

    Thread Starter lisakaye

    (@lisakaye)

    Oops! I just realised that now my News area (secondary widget) on the right no longer lines up with the Welcome content. I used the following CSS to decrease the spacing in the news area:

    #secondary .widget {
  padding-top: 8px;
  padding-bottom: 8px;
}

    How do I get it to line up with the content area on the left? The padding on that is 25px so I don’t understand why the widget has more of a gap when it’s 8px. 

    .content-area{
    padding-top: 25px;
}

    Mod. note: Please use backticks around code in order to make it more readable.

    Hi @lisakaye,

    As your .content-area has padding-top of 25px, the following CSS would bring the .widget-area up inline with it:

    @media screen and (min-width: 1020px) {
.widget-area {
    padding-top: 25px;
}
}

    .content-area and .widget-area also have set widths:

    @media screen and (min-width: 1230px) {
.widget-area {
    width: 335px;
}

.content-area {
    width: 750px;
}
}

    You can increase/decrease the widths in order to bring the .widget-area closer.

    If you have extra questions, please create a new thread on the Goran forum and we can help out from there.

    Thread Starter lisakaye

    (@lisakaye)

    Oh perfect, thank you!

    You’re welcome! ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Excess spacing between text and top image’ is closed to new replies.