Using Twenty Eleven Theme right sidebar is loading on bottom of page

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Check if you’ve got too many </div> elements: https://validator.w3.org

    Thread Starter jmarc4312

    (@jmarc4312)

    Hello I did this and I scanned carefully at the style sheet and did not see any extra. Where do I look? Do I loo it the php files in the theme too?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Use this tool: https://validator.w3.org/ – Put in the URL to the webpage with the issue and it’ll tell you if there are such things wrong

    Thread Starter jmarc4312

    (@jmarc4312)

    Thats a great tool. I checked a site like “ebay.com” and they have 300 or more errors, mine has 17. I looked and all the errors look like suggestions not true problems with the page. so not sure where to begin

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes it doesn’t look like the page you linked in your first post has too many </div> elements, so don’t worry about those errors it’s throwing for now.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    To clarify, where should the sidebar be exactly?

    Thread Starter jmarc4312

    (@jmarc4312)

    it should be directly to the right of the content thats in the center of the pages primary content not pushed down to the bottom right. The homepage of my site (divesummit.com) has the right sidebar displaying the way it should.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Oh it looks like this a WooCommerce template, if it is that means it isn’t part of the Twenty Eleven theme. That may explain the sidebar issue

    Thread Starter jmarc4312

    (@jmarc4312)

    in the style.css the codes calls to this area like this: “#content {
    margin: 0 34% 0 7.6%;
    width: 58.4%;
    }
    #secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
    }”

    I experimented with changing some of the margin options in the #secondary and that changed the position of the sidebar but it messes it up for the homepage and i dont think thats the solution. there must be something messing up the sidebar somewhere but i cant locate where. its frustrating

    Thread Starter jmarc4312

    (@jmarc4312)

    It was working when I installed woocomerce a year ago fine. this is a new problem

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yeah maybe you just need to add some CSS. Try adding this to your Child Theme style.css file:

    .singular #primary {
 float: left;
 width: 70%;
}

    Thread Starter jmarc4312

    (@jmarc4312)

    Thanks that worked. But how? Does adding that subside the code that already was there for #primary? Trying to learn how I can resolve this for the future. Thanks again!!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Look at the class names that are generated in the <body>element. Either view the page source or use a browser developer tool, like the one built-in to Chrome, to help you view this information.

    Thread Starter jmarc4312

    (@jmarc4312)

    Ok for example now trying to make images just on product pages in that one place where the product title is to have the width attribute

    width: intial

    instead of it being width: 100% how would I write the code to call to that. So far I was thinking singular #primary div.images img {width: initial;}

    is that correct

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So there’s already a lot of styles applied to that image, assuming you’re referring to the main product image: https://snag.gy/i4J1q.jpg

    You need to use the same selectors, I don’t know why there are so many, and apply the width to them. E.g.:

    .woocommerce div.product div.images img,
.woocommerce #content div.product div.images img,
.woocommerce-page div.product div.images img,
.woocommerce-page #content div.product div.images img {
 width: initial;
}

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Using Twenty Eleven Theme right sidebar is loading on bottom of page’ is closed to new replies.