CSS/ HTML Help Needed for Main Site

TheVeganAtheist · Post by **TheVeganAtheist** » Sat May 16, 2015 12:04 pm

I know a bit about CSS and HTML however something has stumped me and Im not sure how to resolve it. If anyone knows the solution to this, I would be much appreciated.

On the sidebar of posts on theveganatheist.com I have this issue:

sidebar.PNG

What is odd is when the page loads up it looks like this, however often when I refresh the Subscriber button and ad separate properly. I dont find this problem on all browsers either. If I add additional spacing between sidebar widgets, then when it does load properly the distance is visually too great.

Could someone with experience peak with firebug and see if you have a solution?

Anon0045 · Post by **Anon0045** » Sat May 16, 2015 1:09 pm

I could not reproduce the problem, but I think it might be a javascript issue, with a plugin called Masonry which calculates the width and heights of different blocks and fit them into different positions using css code position:absolute. I've not used it myself, but have seen bugs where it has been used, similar to this.

TheVeganAtheist · Post by **TheVeganAtheist** » Sat May 16, 2015 1:16 pm

i did a search for the plugin called masonry, and Im not sure which you are referring to, as none of them seem to be what Im looking for.

brimstoneSalad · Post by **brimstoneSalad** » Sat May 16, 2015 1:25 pm

CSS glitches sometimes if it hasn't been written very carefully. It's notoriously hard to debug with formatting issues like this that can't be reliably reproduced.

I don't see that bug.
What browser are you using?

Usually you just have to rewrite the formatting to get it to work. It could be something as simple as a stray character or space somewhere that's causing it to glitch sometimes.

Anon0045 · Post by **Anon0045** » Sat May 16, 2015 1:30 pm

TheVeganAtheist wrote:i did a search for the plugin called masonry, and Im not sure which you are referring to, as none of them seem to be what Im looking for.

You are using masonry already in folder wp-includes/js, and I know from looking at the source code in other js files that masonry is being used. Only, I don't know if this is the problem or not, but I have seen similar things happen before when masonry was installed. It's like the page loads, and masonry adds position:absolute to the masonry blocks, but somehow miscalculates the "top" codes.

What I don't understand is what the point is of using masonry in the sidebar, where every block will just line up. Seems unnecessary. Perhaps you could remove the class "masonry" and class "masonry-brick" and see if that helps.

brimstoneSalad · Post by **brimstoneSalad** » Sat May 16, 2015 2:09 pm

I got the problem now. Yes, it's almost certainly an issue with the javascript and page loading, otherwise it would be more consistent an issue.

As Anon0045 said, there's really no reason you need to be using this script there.
I never use third party stuff, for this reason. It gets things done faster sometimes, but then you end up fighting bugs for longer than it would have taken to code it.

TheVeganAtheist · Post by **TheVeganAtheist** » Sat May 16, 2015 3:51 pm

Im not sure which plugin is the culprit as I dont think its one that I installed manually. Perhaps its a script of the template? If that is the case, what should I remove?

Here is a list of the plugins I have installed manually:
1) Admin Post Navigation (links on the backend for next and previous posts)
2) Automatic Youtube Video Posts
3) BAW Post Views Count (count views for post and pages)
4) Broken LInk Checker
5) Disqus Comment System
6) Facebook Like Box
7) Google Analytics
8) Google Analytics Dashboard
9) Google XML Sitemap for Videos
10) Jetpack by Wordpress.com
11) JW Player 6 Plugin for Wordpress
12) Limit Login Attempts
13) Mashshare Share Buttons (Social Media share)
14) Per page head (allows to me to add custom content in <head>
15) Search & Replace
16) SSL Insecure Content Fixer
17) Video Thumbnails
18) Wordpress HTTPS
19) Wordpress SEO
20) WP-PageNavi
21) WP-SpamShield
22) WP Force SSL

Anon0045 · Post by **Anon0045** » Sat May 16, 2015 4:53 pm

I agree with brimstoneSalad, it's very likely that it's a javascript issue.

Can you get access to the sidebar html somehow? You'll most likely find it in the Wordpress theme you're using (wp-content/themes/yourthemename/), but you need FTP or SSH access to the files. For example in Twentyfourteen theme, there is a file called sidebar.php, or sidebar-[some name].php. All themes are not alike, so you might have to search in files like index.php or template-[some name].php if you don't find it. Look for <div id="sidebar" .. >. Once you find it, remove the class "masonry" because that's what's triggering the script. It might not be necessary to remove the class "masonry-brick", but if it is, you could search in functions.php for the function register_sidebar(...) where you can add a html class to each widget dynamically. For example, you'll see something like 'before_widget' => '<aside id="%1$s" class="widget %2$s">', where there might be "masonry-brick" inside class="..." .
Another way is to simply make sure that masonry is not loaded at all. I suspect this is also in the theme because none of those plugins seems to affect the sidebar. Usually in Wordpress you use wp_register_script and/or wp_enqueue_script to load the javascript files, or it is simply placed in the header or footer parts of the code in pure html.

Anon0045 · Post by **Anon0045** » Sat May 16, 2015 6:12 pm

I managed to find the place where the issue occurs, but it was on a different page than the front page which seems to have different names for the widget ids and the problem occurs on those pages 100% of the time. This is different from what I first thought in that the same page loads differently.
Now I see that he first block contains javascript block which doesn't fill up with logo and youtube button until later, which could mean that the rest of the blocks adapt to the empty block which contains only the header. I think a css solution to this could be to add a "padding-bottom" to the first widget, like this:

Code: Select all

#sidebar .widget_text:first-child {
   padding-bottom: 45px !important;
}

or set a fixed height.

Make sure you remove the

Code: Select all

#text-6 {
  padding-top: 45px; 
}

Edit: should be :first-child, not :first

Anon0045 · Post by **Anon0045** » Sun May 24, 2015 7:50 am

Did you try these tips?

It looks like you use a text widget that comes with any Wordpress installation and add javascript inside it that adds your youtube subscription button. I think that causes the elements to calculate the height of the content after the page has been loaded. On the main page, you solved this by adding padding 45px to the element below. This is why I think it would work if you change the padding directly on the first textwidget (since it is used on every page it seems).
Even better would be if you could add a div inside the text widget (when you logged in as admin and go to the admin widgets), wrap it around your script div, and put a min-height: 45px; or padding-below for example, or just set

Code: Select all

.textwidget{ min-height: 54px; }

because I don't think any text widget content will be smaller than this in height.

CSS/ HTML Help Needed for Main Site

CSS/ HTML Help Needed for Main Site

Re: CSS/ HTML Help Needed for Main Site

Re: CSS/ HTML Help Needed for Main Site

Re: CSS/ HTML Help Needed for Main Site

Re: CSS/ HTML Help Needed for Main Site

Re: CSS/ HTML Help Needed for Main Site

Re: CSS/ HTML Help Needed for Main Site

Re: CSS/ HTML Help Needed for Main Site

Re: CSS/ HTML Help Needed for Main Site

Re: CSS/ HTML Help Needed for Main Site