Need some superior css intelect

  • Im working on an as of yet unlaunched site that has some very tight design requirements.

    The problem im running into is that some pages require an image to span the full width of #content (so no padding) and others have text and those pages require padding. The #content div is a different background color than the rest of the site.

    Examples:
    #1 image same width as content https://searts.org/wp/about-searts/

    All is fine except div is higher than image and white background shows below

    #2 page with content https://searts.org/wp/mission-history/
    Needs padding, but if I add it it messes up display in case #1 abouve

    So the question is is there a way with css that I can add padding to the #content div only in cases where there is text.

    In addition in the case of the image only page thee is a pasky <P> tag that surrounds the image and which i think is the reason that the div is taller than the enclosed image in the first example. Is there a way to get rid of it?

    Thanks

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    • Get rid of overflow: auto on <div id="content">
    • Remove font styles on <div id="content"> and apply them to the actual font elements.
    • Again remove line height on body,input,textarea and apply line-height to the actual elements necessary

    That should reduce the additional white space, but there’s still more to be done.

    Thread Starter stevebrett

    (@stevebrett)

    Andrew thanks for your input. The overflow: auto closed up the gap at the top of #content.

    If you look at https://searts.org/wp/mission-history/ now you will see there is space above #content that wasn’t there before. Oddly this space is apparent if the content is text – but not if its an image.

    I also tried your other suggestions none of which had any impact unfortunatley.

    Steve

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Look at line 240 style.css
    The line height is causing some white space and I predict other styles applied to general parent elements are causing the remaining white space.

    Thread Starter stevebrett

    (@stevebrett)

    Thanks again- but It dosnt appear to be line-height. The current style (just installed) as all line-heights commented out

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Steve,
    The suggestions I’ve provided have reduced the white space.
    I just request you acknowledge this.

    That should reduce the additional white space, but there’s still more to be done.

    Thread Starter stevebrett

    (@stevebrett)

    Possibly reduced some, but not entirely. The white space still exists and as such so does my problem.

    I do apreciate and thank you for your effort and thought however

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Need some superior css intelect’ is closed to new replies.