Docs

[Referee]

Hi,

• I noticed that at regular screen size number field and date picker field have the same width which makes the form look very tidy. But when you open up the same form on a mobile device they are not the same. How can I equalize the width of the fields for mobile screens?
• I think this is not that easy to do but I will ask. In X Theme you have nice small add-on Smooth Scroll which sometimes makes feel of the site much better (especially on mobile devices). When E&P Form Builder is used and you go to a page where the form in embedded you feel the difference in scrolling very strongly. It there a simple way to apply Smooth Scroll behaveior to a pages with E&P Form within X Theme powered site?

[Rad]

Hi there,

Thanks for posting in.

May I know which page or URL has this issue? It’s not clear from the screenshot. I checked from your other threads and still can’t find it.

Thanks!

[Referee]

This reply has been marked as private.

[Rad]

Hi there,

I just checked and those are default styling within the plugin’s stylesheet. Though, I see malformed content which might be affecting the structure too.

For example,

<strong><font color="#f56768">ВНИМАНИЕ: НА НАШЕЙ ЛЕДОВОЙ АРЕНЕ НЕТ БОРТОВ ДЛЯ ХОККЕЯ С ШАЙБОЙ!</font><strong>

You’re adding two <strong> without any closing </strong>. This breaks it two times, please fix malformed contents first then let’s check the structure again later.

Thanks!

[Referee]

Sorry,

I forgot to put a slash for closing tag, thanks for letting me know. I removed it completely because it is not needed actually. Other stages do not have any HTML tags except <br> but the issue with different size fields appears there as well. Please check that when you can.

[Paul R]

Hi,

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

@media (max-width: 480px) {
#estimation_popup.wpe_bootstraped #mainPanel .genSlide .genContent .itemBloc {
    width: 100%;
    padding: 0 10px;
}
}

Hope that helps.

[Referee]

As you can see it in the form it brakes a lot of staff there in terms of rendering. And I would prefer to apply the same stall to amount field as for the data rather then making data field also 100% width.

[Paul R]

Hi,

Can you provide us a screenshot on how exactly you would like it to look like.

Thanks

[Referee]

Like I described in the initial post. There are two links to two photos. I’d like the mobile version at vertical view to look similar to landscape (or regular screen’s versions). I do not think that it is necessary to have Number field to be 100% width (as it is now) because it’s content rather small. So it will look tidier if it fits the width of Date picker.

[Paul R]

Hi,

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

@media (max-width: 480px) {
#estimation_popup.wpe_bootstraped[data-form="1"] .itemDes {
   margin:0 auto !important;
}
}

Hope that helps.

[Referee]

Unfortunately it didn’t work either.

[Rad]

Hi there,

Now it fixes the malformed HTML elements, though, it can’t be done the moment. It’s intentional, the size of the fields are relative to the image. Increasing its size greater than the image will break the image and its styling.

The image as a selection and the input field is considered a single element, contained in the single group as one field.

In summary, field’s width is the same as image’s width because they are intentionally made as one single entity.

Thanks!

[Referee]

OK, thanks. Maybe you suggest thatching to plugin developer then? It only appears in the smallest mobile view.

[Rad]

Hi there,

It’s because of image options are stacked to one another on mobile, but they are inline on the desktop. Yes, I’ll forward this as a feature request, but can’t guarantee timely response since it’s not from us.

I’ll continue checking too.

Thanks!

[Author]

Posts