Formatting issue

Hi guys, I really need some help with a few formatting issues I’ve been having on my website. The biggest issue by far is a Google Console ‘content too wider than screen’ and ‘clickable elements too close together’.

The page with the clickable elements issue is http://vapinghardware.com/calculators/e-liquid-calculator/
That same page (and all other ‘calculator’ pages seem to suffer with the ‘wider content’ issue.
Everything works absolutely fine on a desktop and tablet, but on phone the content is cut off and certain clickable elements won’t allow the user to enter a value!

I really don’t know whether this is a html issue with the actual calculator(s) or something that can be resolved with CSS, changing the margin, text size etc. How can I make the calculators fully responsive to fit the screen on mobile device?

The other issue I’m having is on http://vapinghardware.com/wicking/
If you could take a look you will see that the gap above subheadings is larger than the gap below. I’ve no idea how to change this and it’s making the content look odd.

Any help you can provide would be really appreciated.
Many thanks,

Hello @VapingHardware,

Thanks for writing in!

Your calculator is using a table element and in smaller screens, the table is out of bounds because there aren’t enough space anymore. To resolve this, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 767px){
  select, textarea, input[type="text"], input[type="password"], 
  input[type="datetime"], input[type="datetime-local"], input[type="date"], 
  input[type="month"], input[type="time"], input[type="week"], 
  input[type="number"], input[type="email"], input[type="url"], 
  input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    max-width: 100% !important;
    width: 100%;
  }

  table th, table td {
    width: auto;
    font-size: 90%;
    padding-left: 3px;
    padding-right: 3px;
  }
}

And for the sub headings issue, this is because of the default top margin of the heading element. To resolve this, please check this out: https://theme.co/apex/forum/t/customizations-element-spacing/211

Hope this helps. Please let us know how it goes.

Hi there,

Thanks so much for your response. This has solved the spacing issue perfectly although I’ll have a play around with the table as the content is now slightly ‘scrunched’. However, on mobile we’re still experiencing the ‘clickable elements’ problem within the supplier and flavour fields.

Any suggestions on how to solve these clickable element issues?

Many thanks,
Vaping Hardware

Hi @VapingHardware,

Please clarify which field is not clickable, I’ve tested those input field and it’s only the Flavour Total is not clickable (which is normal because that is a calculated value)

Thanks,

Hi,

Thanks again for your help, it’s very appreciated.

Under the heading Flavour # 1 the Supplier and Flavour input fields do not allow you to click on them. Or rather, you can click on them but the mobile keyboard will flicker for a moment and then disappear. What’s odd is that if you click on the Recipe Name first and then click into the above mentioned fields, it will let you add content.

I’ve also been told that this issue doesn’t present itself when using iPhone. Why or how this makes any difference I have no idea! It’s also only an issue on mobile. All the calculator pages on desktop work without issue.

Many thanks,
Adam

Hi Adam,

Thanks, Yes I was able to replicate this issue now on an Android Phone, unfortunately, this is not a CSS issue, it seems to be an actual bug with the form. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

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