Docs

[stormgoose]

Hi there.

I have a rather erksome but simple problem I hope you can fix.

I’m using the Ethos stack, and when I select a page that is quite short (from the end user navigation), the whole of the site shifts about 10 – 15 pixels to the right. From a design flow point of view this doesn’t look so great 🙁

I’m hopeful you can quickly fix or advise. My site isn’t live yet, and I’ve given the access details for it via a private message in my last forum post. For completeness, so you have to hand, I will send again now.

Once you’re into the site, please compare ‘Visit Us’ with adjacent ‘Contact Us’. ‘Contact Us’ is a short page, and you’ll see the way it jumps to the right when selected from other pages!

Many thanks in advance 🙂

[stormgoose]

This reply has been marked as private.

[Joao]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks

Joao

[stormgoose]

This reply has been marked as private.

[Nabeel A]

Hi Bobby,

Thanks for providing the credentials! You have not installed the Cornerstone plugin yet. Please note that X theme requires Cornerstone plugin to function properly. I’ve installed the plugin, please check if the issue is resolved.

Cheers!

[stormgoose]

Thanks for coming back to me, and with this info. Surprised that Cornerstone is needed – all the theme.co stuff I’ve read on it has marketed it as a bonus, not a pre-requisite.

Unfortunately, it has not fixed the problem. I’m viewing from latest stable build of Firefox on a Windows 10 PC, if that helps at all – haven’t tried it in other browsers. It’s still jumping to the right 🙁

Cheers,

Bobby

[stormgoose]

Incidentally, it has the same problem in Internet Explorer and MS Edge. I would anticipate you’ll be seeing the same issue on the Mac platform (I’m guessing you use Macs, from some of what I’ve seen of your tutorials and the like before?) with Safari and Firefox too, although yet to test personally!

[Joao]

Hi There,

Would you mind cleaning your cache and testing it again?

I just checked your website and it seems centralized.

** The cornerstone as a plugin “is a bonus” let´s say, but the internal codes of X Theme are integrated with Cornerstone so even if you do not use the plugin you still need to have it active.

Please see image attached of how I see your website.

Let us know your thoughts.

Thanks

Joao

[stormgoose]

Hi Joao,

Thanks for coming back to me. I’ve looked at the screenshot you sent, but you’ve missed the key part of my question. The overall site is central and consistent. But on pages that are ‘short’ it jumps to the right by something like 15 pixels. So, as in my example I gave, make your web browser full window, and closely compare ‘Visit Us’ and ‘Contact Us’. You will see ‘Contact Us’ shifts about 15 pixels to the right, because it is a ‘short’ content page. If I add a load of random content to it, the problem corrects itself, but I don’t want to have to do that! All the other pages (including the one you’ve screenshotted) stay in a consistent centre, because they have longer content.

What browser / OS are you using to test this? I’ve got access to pretty much everything, so let me know just to check your combination isn’t the one that’s working right when all the rest are wrong!

Cheers,

Bobby

[Christopher]

Hi there,

I’m another support staff and I’m not able to replicate this issue. I’m testing on windows, chrome browser. Please see the attachments.
Please clear cache and check again.

Thanks.

[stormgoose]

Hi Chris.

I’d written a message detailing the continued problem, and have produced a composite JPEG in Photoshop, which I’ll attach for completeness.

The JPEG will illustrate the problem as I’m seeing it, and I think I have spotted the cause. Because of the page length of all pages (EXCEPT ‘Contact Us’) being longer, typically people will have a vertical scrollbar to the right of the browser window. This therefore dictates a different ‘centre point’ to the window. Because ‘Contact Us’ is so short in content, there is no scrollbar (certainly when fully or larger windowed), so the centre point of the window is different again.

It is worth noting that the extremeties of this effect are reduced as you reduce the size of the browser Window horizontally – and I think the screenshots you created might not show an issue because of your window size causing a scrollbar to appear on ‘Contact Us’.

I suppose there isn’t an easy solution to this problem. One possibility is that you give me some CSS or HTML code that will allow me to set the minimum length of pages or a specific page, and I’ll do this to ensure it makes the site look ok horizontally, as it will trigger there to always been a scrollbar when there is on the other pages.

Look forward to hearing from you, and I hope that makes sense.

Cheers,

Bobby

[Rad]

Hi there,

It’s because scrollbar uses space too, hence, the available width is different from a page with scroll bar and with no scroll bar.

Some device is tall where even longer content is displayed at once, hence, no need for the scroll bar. Some have smaller heights that even few content needed a scroll bar. Hence, there is no permanent fix other than make your content with the same amount of content. Or set minimum height.

Thanks!

[stormgoose]

Hi there.

Thanks for your reply – although your response confirms what I’ve already observed and stated (which is somewhat helpful), what I really want to know is how I can set the minimum height, as requested in last question.

Do you have any suggestions for how to do this – if not possible through the customizer, perhaps some CSS or HTML / PHP code I can drop in somewhere?

Thanks,

Bobby

[Lely]

Hello Bobby,

Upon checking your site again, I can see that the contact us page have scrollbar already. There’s no shifting to the right anymore. In case you still want that CSS that will add minimum height on the content, you can add the following:

.x-main {
    min-height: 500px;/*Adjust this accordingly*/
}

Hope this helps.

[Author]

Posts