Some CSS bugs on front page driving me crazy.

  • I’m trying to help a friend who is having frustrations with her site.

    On the “home” page, it very briefly appears to sort of “slide” open the top bit, causing an annoying flicker which isn’t on other pages.
    Also, I’ve told it to be one column, no menu, but there’s a gape on the left on larger screens, and a big gap at the top.

    After 2 hours of frustration, I’ve narrowed down a few things:

    In the home page, it has

    <div id="content" class="site-content">
<div id="primary" class="content-area">

    But on other pages, it has:

    <div id="content" class="site-content">
<div class="wrap"> <----- not on hoome page!
<div id="primary" class="content-area">

    I’ve managed to fix the whitespace and redundant page title for most pages with the following custom CSS.

    .entry-title {display:none;}
.site-content {padding-top:10px;}

    However, while the “home” page is obeying the entry-title directive, it’s just ignoring the padding directive.

    As for the misaligned body text on all pages, it all starts to go wrong at about 768px when the text starts to “open up” a space for a menu bar on the left.
    But as I say, I chose one column, no sidebar, so the text would align properly.

    Any help appreciated!

    Browsers affected: Chrome, IE11 and Edge (all latest versions)

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Hi @digitaltoast, I’m sorry that you’re not having an easy time with this theme.

    Let’s focus on this issue for now:

    However, while the “home” page is obeying the entry-title directive, it’s just ignoring the padding directive.

    Would you be able to link your website so that we can debug this for you?

    Thread Starter digitaltoast

    (@digitaltoast)

    Many thanks!

    https://www.rosamundharwood.co.uk/

    I did link before but it got deleted.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If I understand correctly, you want the gap where the ‘entry-title’ was to be gone? To achieve that, try this CSS:

    
.entry-header {
    display: none;
}
    Thread Starter digitaltoast

    (@digitaltoast)

    Thank you.

    OK, I have added that to the other CSS, but although it has tightened up the white space on the other pages, the Home page is still displaying the large white space.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    That gap on the Home page is caused by something else, see this screenshot: https://snag.gy/mvnBqG.jpg

    Does that give you enough to go on? You can use the ‘twentyseventeen-front-page’ class that is found in the <body> element to apply your CSS for the homepage.

    Thread Starter digitaltoast

    (@digitaltoast)

    I am not sure I follow? I think the problem is that, as your screenshot shows, the “wrap” div appears differently on “home” page to other pages (as I noted in first post).

    So, I just want to remove this problem and have the layout of the pages the same, without this big white space and without the strange unwanted sliding open of the top bar too!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m sorry the image wasn’t useful, it was meant to show you there’s a padding style being applied so that you can write CSS to override it.

    Try adding this CSS:

    
.twentyseventeen-front-page .panel-content .wrap {
    padding-top: 1em;
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    without the strange unwanted sliding open of the top bar too!

    Is that a different issue?

    Thread Starter digitaltoast

    (@digitaltoast)

    OK, that is much better, but now I am trying to remove the bug with auto left margin.

    In firefox, if I untick margin-left:auto in the .content-area

    So, to the customiser, I add this:

    .content-area {margin-left: 0px;}

    or I try

    #primary {margin-left: 0px;}

    But it’s not making any difference.

    I also ran 2017 through an html validator and there are some failures. I am starting to think this theme might be a little be too beta. Can anyone suggest a simple theme which is similar, but works well?

    Thank you!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Could you open a new thread on the general Themes and Templates forum about recommendations for another theme? https://www.ads-software.com/support/forum/themes-and-templates/#new-post

    As this is a new theme it is important we keep the support threads clean so that we can build a sound source of documentation for the theme.

    Thread Starter digitaltoast

    (@digitaltoast)

    OK, but for the moment, if I can only get rid of the white space which opens up on the left due to margin-left:auto, I will be happy!

    Thank you!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you show a screeshot illustrating the space you mean? And link the page with the issue? Thanks.

    Thread Starter digitaltoast

    (@digitaltoast)

    Thnk you!

    Sure – any page at https://www.rosamundharwood.co.uk/, but again, the home page widths are slightly different to other pages.

    So, when the PC screen is narrow or the page is on a tablet, it displays OK like this:

    Page layout OK

    But on a regular size desktop monitor, it starts opening up this horrible gap on the left due to auto left margin…

    gap on left due to auto left margin

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I see. So for some reason the theme options are not working as they should. The quickest thing I can do is give you some CSS to resolve this:

    
html .page.page-one-column:not(.twentyseventeen-front-page) #primary {
    margin-left: 0;
}

.twentyseventeen-front-page .panel-content .wrap {
    max-width: 1000px;
}

    Please note that the above code will only work on the Homepage and pages that use 1 column.

    Thread Starter digitaltoast

    (@digitaltoast)

    Oh yes! Thank you! Problems resolved!

    I’m hugely grateful for your help.

    Should I file a bug, or do you want to do it, or will this thread do?

    Once again, thank you thank you!!

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Some CSS bugs on front page driving me crazy.’ is closed to new replies.

Tags