We Keep Coding

Wordpress HTML/CSS not displaying correctly - no changes made

I am having trouble identifying a problem and it is driving me crazy. If this is a poor question or in the wrong place please have mercy, I am exhausted trying to figure this out.
Here is how my website is displaying: My Site
And here is how it is supposed to look:
Archive of Page
Nothing has changed as far as I can tell. I have disabled plugins, re-uploaded them there. My mind is boggled!? It looks the same (code) but appears different. What am I missing!?

I happened to get this as well, what you should do is to redownload the layout, thats what solved my issue. I remember adding 1 line to css and removing it, the layout got stuck and refused to update, so that was my solution. I hope someone else can give you a better one though :)

you have a problem with jQuery in your website.
I think you need to update your theme.
your theme is from 6/2014 and now is 6/2016...
Your js makes all this section on home vertical align to middle. And the js doesn't work now and stay on top.
Update your theme :)

Why are pagination links not displaying on my site?

I was trying to fix the width of the images however, unexpectedly, the navigation pager below disappeared.(pages 1,2,3). I am new to CSS and have no idea what happened. I don't now how to fix this, the navigation codes are still present however I guess it cannot find any space to show up. Can you help?
Code:https://gist.github.com/anonymous/3704b07a027426208738
Website:https://www.alphabitrage.com

I went through your code until I counted about 50 coding errors.
So I ran the source code (from the GitHub link you provided) through the W3C Markup Validation Service, which found 565 coding errors.
This alone suggests multiple problems with your web page and potential difficulties ahead in terms of maintenance and troubleshooting.
However, I understand you're working with a template so recommending that you re-structure your code to be valid and semantically correct (which I would normally do) may not be feasible in this case.
Also, you mention in your comments that the code was working well until you made some adjustments to the widths of images. So I put the errors aside and continued searching for a possible problem.
Providing a link to another website with a working template was a good idea on your part. I was able to compare your code with the code from the other site.
I discovered that your code was missing the divs that render the HTML for the pagination links.
In particular:
<div class="blog-pager" id="blog-pager"></div>
... is completely missing from your code.
Your Site
Other Site
Once you restore that code block your pager should re-appear.

z-index for jquery object issue

First off, I am sorry in advance- anyone who reads this is going to hate me.
So, I am currently finishing a webpage for a client. Things are going decently, except I'm having a bit of an issue with the positioning of an element. There is a little contact box that is supposed to slide in from the side when you click on it. The issue is that I basically have had my hands tied, and I have to use wordpress for this page, and this contact box is a plugin that the original author of this page chose. For some reason- this contact box always ends up behind other elements. I tried setting the z-index in the source code of the plugin by finding the name of the variable that is supposed to hold the instance of the slider- and I could not get anything to work (partially because I havent used jquery in a while, and, this isn't my plugin). I tried using the .zIndex function, but, it kept throwing errors. So, I went to CSS. I got the IDs of the wrapper and the actual box itself, and set their z-index to 100. This did nothing, which has left me stumped. Unfortunately, I can only provide links to the site, and a pastebin of the plugin's code- since the source code for the website is huge... and I also dont actually have access to the server- only the WordPress admin page (which doesnt allow me to edit the source of pages)
http://pastebin.com/NX8AnB16 - pastebin of the plugin source
http://buyinghouseinusa.com/ - the site i am currently trying to finish
If anyone could help me figure out what I need to apply the z-index to to make the stupid contact form stay on top, I would be very greatful. I apologize for the inconvenience of not having the actual code offhand (with the exception of what the browser can show me)

z-index only applies to positioned elements.
Then, in order to make div.dwp-contact-wrapper{z-index: 2000} work, you need
div.dwp-contact-wrapper {
position: relative;
}

iScroll not responding at all inside div with transition

I have a an app that I will port to Phonegap, and I am using iScroll 5 to handle some aspects of the scrolling.
This app is built with some CSS from Ratchet, but quite modified, and just about all the Ratchet javascript has been removed; also jQuery; FastClick.js.
The app is a single HTML file (not using push.js from Ratchet), and divided into Pages that are inside a master Content area, and change with CSS3 transitions. So far, iScroll is used in two places; initialized at the same time with two different calls to IScroll("#id").
The first iScroll works fine - it is just a simple set of sections with paragraphs scrolling between two fixed header/footer bar elements.
The second one wraps an entire page that shows on an internal transition. In other words, its not a page as described above, but it is a full width element that is taller than the page, and sits beneath the header and one other button set. That may or may not be important, but when it shows the first time, there is nothing anywhere I can do to get it to initialize properly.
Since the js variable is global, I can see it, and this is what I have noted so far:
> myScroll.initiated=0
> myScroll.enabled=true
> myScroll.scrollBy and myScroll.scrollTo both work as expected
> myScroll.refresh() and myScroll.resetPosition called from
js file or from console have no effect whatsoever
I am using Chrome with touch events enabled for development, but the behavior is replicated on my iPhone. The div (which only contains a simple list) responds to touchmove events, in that they are logged in the console, but there is literally no scrolling movement at all. I believe that there is probably a bug related to multiple layers being positioned with transitions, but I don't know what to do next.
Can anyone offer some guidance on,
How To Fix This
Or failing that, what is the best placed to look to debug this, and find out why nothing is happening.
Thanks

CLeditor uses the HTML 'align' attribute. How can I change that to CSS 'text-align'?

I've set up the CLeditor on a site I'm working on. Currently I'm setting it up so that as you type and edit within the editor, you can see a live preview of the results just above it, a lot like what you get when typing a StackOverflow question, though much more basic.
It works by simply copying the inner HTML of the iframe contents to another place on the page. However I've run into an annoying issue. When I use the alignment buttons (left, center, right), it adds the attribute align="right", for example, to the selected text. While it works in the editor, it does not work on the page itself, probably because that attribute is pretty much obsolete.
...
I actually figured out how to get around this issue while typing this question. Still, I'll post this question with my solution. Plus I have a relevant question to add to this.
Originally I tried applying the following CSS to the page:
div[align="right"] {
text-align:right!important;
}
This worked for initially loading the data onto the page, but while dynamically changing alignment in the editor, the live preview was not reflecting the changes. I thought at first that this was because the styles were applied at load time only.
Well, that was a brain fart because I know better than that. The real problem was that I was selecting a DIV element and the align attribute isn't necessarily applied to a DIV. Changing div[align="right"] to *[align="right"] works perfectly.
However, even though I found a workaround for this specific issue, I still can't figure out how the cleditor builds the HTML output for the iframe. Where does the align attribute come from in the code and how does it know to put it (and all of the other elements/attributes) into the HTML? If I had a way of manipulating this, I could simply tell it to use inline CSS for the alignment rather than the deprecated align HTML attribute. Please note that I do not wish to enable the cleditor's built-in "useCSS" feature.
Thanks for any information you can share, and please do not downvote this question just because I already solved the initial problem. I want this to be able to help others if they run into the same issue. (I'll also post my answer as an answer).

Applying the following CSS to the live-preview of the page works perfectly:
*[align="right"] {
text-align:right!important;
}
Don't forget to do the same for left and center as well.