Twenty Eleven Child Theme: static home page align problem

  • Resolved artguy2020

    (@artguy2020)


    13 years, 7 months ago

    Hello.

    Despite successfully putting together several WordPress websites,
    I am still a bit of a novice, so bear with me.
    I am working on a twenty eleven child theme,
    seen here https://meaningsinmotion.com/ .

    In One-column no sidebar default layout, the static home page is having some alignment issues. Right now the page title (not seen), a place holder for a slider plug-in and the footer are all lining up with the home button. Would like to have them (the page) line up flush right with the header.

    Also the footer needs to be flush bottom against the WordPress notice.

    Been looking for answers in the forums and online.
    Open to code suggestions and links / threads to check out.

    Thanks.

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

  • your page content is breaking the layout:

    when i look at the html in the browser – i get, for instance:

    <div id="page" style="width: 1000px;">

    and

    <div id="footer" style="background-color: rgb(0, 173, 238); height: 25px; width: 100%; clear: both; text-align: center;">

    which means that you are using css id #page and #footer which are already defined for the theme, and must not be used again; change these css id names.
    the 1000px width of your div is too wide for the existing space.
    also, using a fixed width div in a flexible theme will cause breaking of the design.

    can you describe with words what you want to achieve, and how you want your design to look like?

    ps:
    somewhere to start:
    to fix the width of the theme, change here in style.css of your child theme:

    /* One column */
.one-column #page {
	max-width: 1000px;
min-width:1000px;
}

    to align the content to the left, add something like this:

    .one-column #content  {
	margin: 0;
}

    Thread Starter artguy2020

    (@artguy2020)

    Thanks for the advice!
    Code changes made to meaningsinmotion.

    Here is the layout supplied to me.
    It is straight forward:
    Header and menu on top.
    Body has itunes type menu (slider plug-in) on left,
    product copy on right.
    Sign-off on bottom.

    Still need to get the sign-off (blue bar on the bottom) to run the length of the page, matching the blue menu bar on top and have it flush against the footer

    Also, since the new “one column page” code fixes page breakout issue, do I still need to change the fixed width in the page code as well?

    Thanks again.

    your ‘#splashpage’ is 1000px wide, and so is ‘#sigh-off’ in a page that is max 1024px wide – therefore, the blue strip does not fit the full width.

    in style.css of the child theme, there was a closing } missing, see fixed below:

    /* alignment */
.one-column #content  {
	margin: 0;}

    which prevented the page styles to set the #page to a fixed with of 1000px.

    question:
    is the ‘sign-off’ to be in every page?
    if so, why don’t you integrate it into the footer of the theme?

    if not, there is some empty code after the two closing divs in the page content, which shows in the html as:

    <p><br>
</p>

    start by removing this from the page content.
    and add .hentry{margin-bottom:0!important;} at the end of style.css (don’t forget to remove the stray } at the bottom first.

    Thread Starter artguy2020

    (@artguy2020)

    Thanks for getting back to me so quickly.
    I see the empty code in the “page source”,
    but not in while working in the wordpress page html.

    Thread Starter artguy2020

    (@artguy2020)

    Making progress, but still haven’t found empty code.
    Blue line / “sign off” is on static home page only.

    Edit indicator on static home page can only be seen while working on page in wordpress.
    On the static home page, there is no Title in the “enter title here” space, but is named Home in the slug space.

    WordPress is still leaving a space for the page title.

    example 1 Home page, no title
    example 2 About page, title shown

    Question is how to reduce or eliminate that space, so that content (slider and copy) can move up closer to navigation bar?

    Thanks.

    Thread Starter artguy2020

    (@artguy2020)

    Problems solved.

    Empty code taking up space was <html> <body> on top and </html> </body> on bottom. Removed code and elements fell into place.

    Found answer to title spacing issue in forum here.

    Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Twenty Eleven Child Theme: static home page align problem’ is closed to new replies.