Docs

[Andre]

Dear Super Support Team,

I’m struggling a bit to get some stuff the way I would like so if you could please point me in the right direction, that would be much appreciated. The website is optimized to Chrome, all of the numbered issues listed below occur on the latest version of Firefox.

1) Background video sometimes starts very small on the top left corner of the section. After 5-10 seconds it becomes full screen. Can’t find a reason why or how to fix it.

2) Navbar items slightly move when hovered;

3) Navbar starts grey when the page is first loaded. After scrolling down and back up it recovers the transparent color it should have.

4) I can’t seem to make the responsive headers to work as they were supposed to (First section of the page, blue letters). I’ve tried many configs and around max: 40px, min: 26px, comp: 1.5. With values around these ones I never get good results. Example: In FF letters achieve font-size: 16px as per Inspect Tool.

I understand why video without controls is deactivated for devices with touch screen. I would like to ask though if there is a workaround for hybrid devices that also have touch screen but sometimes are 21” laptops. The reason why I ask this is because I really wanted for users to see the video on every single device. So I made a GIF version of the video and used it as a Poster. This outputs in touch screen devices but also big screen laptops with touch. This makes my page look horrible as the GIF is not optimized to such a big screen, as you may understand.
Same thing for Parallax. The last generation of Laptops with touchscreen, in my opinion, should be able to play those videos as well as see the parallax effect.

If you could give me a workaround for this issue as well as for the 4 numbered aforementioned items, I would be much thankful.

Have an awesome day!

Cheers!

[Andre]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Not able to replicate this.

#2 Please remove font-weight: bold; from following code :

.x-navbar .x-nav-wrap.desktop li a:hover span {
    color: #FF6600 !important;
    font-weight: bold;
}

And add this one :

.x-navbar .x-nav-wrap.desktop li a span {
    font-weight: bold;
}

#3 Please remove this :

.masthead {
height: 0px; 
    -moz-height: 0px;
}

And add this :

.home .x-main.full {
    margin-top: -66px;
}

#4 Please see the attachment, responsive text is working fine.

#5 Mobile intentionally disable autoplay for videos, you don’t want your visitor got data charges over your videos. Videos are playable through user’s interaction, like tapping. But there is no way to tap a video when it’s applied as background. What you could do is add poster image, and poster image will be displayed on mobile where video is not playable.

About parallax, it’s also disabled for mobile intentionally due to performance drop. And it will not work on hybrid devices. Desktop is detected with screen size and no-touch functionality, but mobile can just be detected by touch functionality since there are mobiles that higher resolution than a desktop. Means, hybrid devices is harder to detect if it’s really a desktop or mobile. What you could do is disable touch features on your laptop.

Hope it helps.

[Andre]

Hi there Christopher,

Thank you so much for your reply. From your screenshots I can see you used Chrome instead of Firefox. As I mentioned in my post, the 4 numbered issues happen on Firefox, not on Chrome, so it’s perfectly normal that you can’t replicate those issues on your end.

Regarding 5), please don’t suggest your customers to disable touch screen on their laptops to fix an issue that has nothing to do with their laptops. I understand you’re trying to fix the issue for me, which I appreciate, but I really don’t care how I see the website, I care how others see the website and if they have a laptop with touchscreen they will be affected by the issue. Regardless of me deactivating the touchscreen on my laptop or not.

Please take a look at the video I’m linking in the private reply.

Thank you so much for your time.

[Andre]

This reply has been marked as private.

[Andre]

Hey there,

Just an update, the solutions provided to number 2 (items jumping when hovered in FF) and 3 (grey navbar instead of transparent in FF) didn’t do any of the expected.

The solution provided to 2) the only thing it does is to put the items in bold when they are not being hovered and remove the bold when they are hovered. That’s not what I’m looking for.

I believe these suggestions were provided because you accidentally missed I was referring to Firefox only and you tested the site in Chrome.

So, I still have all of the same issues as when I initially posted this, so if you could please take a look at the website with FF and IE and address said issues, that would be great and much appreciated.

Thanks again for your awesome support and my honest apologies for being a pain…

Have a great day.

Andre.

[Christopher]

Hi there,

I’m sorry for the confusion about testing in FireFox.

I can see the issues your’re referring to in FireFox, would you please provide us with login credentials so we can take a closer look?

Thanks.

[Andre]

This reply has been marked as private.

[Christian]

Hey there,

For the video issue, please try using MP4

For the menu, Please add the code below in your Appearance > Customize > Custom > CSS

.x-navbar {
position: fixed !important;
top: 0;
left: 0;
right: 0;
}

I’m sorry but I don’t see a problem with the Responsive Text.

Thanks.

[Andre]

Hi Christian,

Thanks for getting back to me and I really appreciate those lines. I don’t know how but with that you fixed issues number 1), 3) and 4). Which is really great. Thank you.

In Firefox, when I hover the mouse over the menu items in the navbar they jump a little, as per video in the next reply.

Can you advise me on how to avoid this to happen?

Thank you so much.

[Paul R]

Hi,

To fix it, you can add this under Custom > CSS in the Customizer.

.x-navbar .x-nav-wrap.desktop li a:hover span {
    font-weight:normal;
}

Hope that helps.

[Andre]

Hey there Paul,

Thanks for the reply. The only thing that did was to remove the bold which is not something I want. This only happens in Firefox, if you hover an item in the menu, every item on the left of that will move. This is just a small detail that I’m not too worried about but if you have any solution, I appreciate.

Another question I have which is far more important is: How can I populate different sections of a page with recent posts (using the recent post shortcodes) without repeating posts?

Thank you.

[Paul R]

Hi,

1. Making it bold on hover expands the width of your menu causing every item to move to the left.

Avoid “CSS Jitter”

A workaround is to set a fixed width to each menu item.

You can add this under Custom > CSS in the Customizer.

.x-nav .menu-item-1067 {
    min-width:133px;
}

.x-nav .menu-item-1068 {
    min-width:159px;
}

.x-nav .menu-item-1069 {
    min-width:147px;
}

.x-nav .menu-item-1337 {
    min-width:123px;
}

2. You can use the offset attribute of recent posts shortcode to prevent duplicates.

eg. To display 12 items

[recent_posts count="4"]
[recent_posts count="4" offset="4"]
[recent_posts count="4" offset="8"]

http://theme.co/x/demo/integrity/1/shortcodes/recent-posts/

Hope that helps.

[Andre]

Hey there!

Thank you very much for your reply, it definitely put me in the right direction.

However, I want to use this shortcodes so I can have a custom blog page. Do you have any idea how I can achieve this?

Example: I want the blog page to have 4 rows. Some rows have two columns and some have 3. All of this with the masonry style. So I created the desired layout and populated it with those shortcodes. But now, how can I get to the next page of posts and have them layed out the same way? And how can this process be automated if we’re talking about 100+ posts?

The other approach was to use ESS GRID or THE GRID but unfortunately the masonry view is limited to what one can put together in terms of layouts.

So, if you could please share some light with me, that would be much appreciated.

Thanks a lot. Have a great day.

[Rupok]

Hi there,

Thanks for updating. It would be difficult to achieve with shortcodes what you are trying to accomplish. You should go with “Essential Grid” or “The Grid”. If that doesn’t solve your issue then you might try other third party plugins.

Hope this makes sense.

[Author]

Posts