Elements Displaying Improperly

Support
#1

Hi,

I’ve noticed an issue on one of my sites. I’m using the X theme icons, and when I’m logged in, everything looks fine. However, it looks wrong when I’m logged out of the admin mode. The icons don’t show up and the twitter feed extends past the maximum height I set.

This is what it should look like (and what it looks like while logged in):

These are what the site looks like when not logged in:

It looks like there’s some Javascript issue, because the Javascript link at the bottom is supposed to be hidden when it loads.

Any ideas what’s wrong? Everything is up-to-date (WordPress 4.9.2, X Theme 5.2.5).

#2

Hey @murnanc,

Please check for the following

  1. Ensure everything is up to date.

  2. Clear all caches including browser cache then deactivate your caching plugins and other optimization plugins.

  3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

  4. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

  5. Remove custom CSS, Javascript and templates.

If nothing helps, please give us the URL having this issue and give us WP Admin access in a Secure Note.

Thanks.

#3

None of the steps helped, I’ll attach a login in a secure note.

#4

Hi There,

The Twitter widgets and icons are showing up on our end, login or not. Please clarify how we can replicate the issue.

Thanks,

#5

The Twitter box should have a height of 550 px. However, there is something using inline CSS to increase the height to be way too big. This only happens when yI’m not signed in.

#6

Hi again,

You can add the following CSS to restrict the twitter box to 550px:

.home .el5.x-bar-content-area {
    max-height: 550px;
    overflow-y: auto;
}

Let us know how this goes!

#7

Hi,

That code doesn’t work. Twitter normally automatically makes the box 500px. However, something else is applying inline CSS (which overrides my custom CSS) and forcing it to be way too big. Compare how the twitter box appears and scrolls when you are and aren’t logged in.

#8

I believe the issue is that my a tag isn’t being run–anything inside the tag is simply converted to plain text. What widget do I have to use in order to properly use tags?

#9

Hey There,

Even if you use widget agrea, you will still have the same issue. You used this:

<a class="twitter-timeline" data-height="800" data-link-color="#006633" href="https://twitter.com/MHSComets?ref_src=twsrc%5Etfw">Tweets by MHSComets</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

This is a valid and correct code that displays the timeline and it may have controlled the height. I am not sure if you can control the height from the site that were you got this code from. Please go back to the site were you got this code and find a way to reduce the height.

Please let us know how it goes.

#10

Hi, the data-height=“800” is straight from Twitter as a valid way to change height. There is something blocking the Javascript from running inside the widget. For example, if you place in the widget, it will display the alert while logged in but not while logged out. How do I include Javascript in the widget?

#11

I tested the code in my test site, set the height to 200 and it works both logged in and out so this looks like there’s something in your setup that is causing the issue.

We need to know if this issue is caused by X so please backup your site and try switching to the default WordPress theme and check if the issue persists.

If that does not help, please give us FTP access. Please note that we might deactivate all third party plugins and remove customizations while we troubleshoot.

Thanks.

#12

Hey,

I’m not putting this into a sidebar widget. I’m pasting the HTML and Javascript directly into the “Content Area” element using Cornerstone. Do you see the Javascript alert when going to new.masoncomets.org while not logged in?

#13

Hi There,

Here is your issue, this is the CLASS/Styling that enables you to scroll the Twitter widget on the Cornerstone preview.


But that CLASS was overwritten on the front-end


X Theme has nothing to do with this, as both Styling are coming from the same stylesheet file.

https://platform.twitter.com/css/timeline.2244cdc1aa6afd59d64cc31948a29dca.light.ltr.css

Since this element (twitter widget) is inside an <iframe> there is nothing we can do about it to counter overwrite that .SandboxRoot.var-fully-expanded .timeline-Viewport styling on the front-end.

What we can do is limit the height of the Content Area element and enabling the scrolling through it instead. To do this, please add this to Theme Options > CSS

.twitterbox {
    max-height: 550px;
    overflow-y: scroll;
}

Then apply the CLASS twitterbox to the Content Area element.

Hope this shed some lights,
Cheers!

#14

Am I able to put Javascript directly into the Content Area? That’s the issue, I just don’t know if it’s possible.

#15

Hi There,

You have a JS tab on Cornerstone on the very left. You should add your JS there.

Hope it helps

#16

Hey,

I figured out a workaround using a Twitter widget. Thanks for the help!

#17

Glad you’ve sorted it out :slight_smile:

#18

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.