The contact form is not fully responsive

Buldre

Thanks for a nice template! But unfortunately, the contact form in Ja Simpli is not fully responsive.

When reading from a cell phone, the text for the address field is squeezed into a too narrow field on the right, so that the text splits on more lines than necessary.

And when reading from a PC, the photo of the contact falls far to the right of the text, which looks like a faulty design.

How to get this fixed?

pavit

Buldre How to get this fixed?

There is nothing to fix , tested on iPhone X iOS 13.1.2 and Samsung Galaxy S9 and contact form works like a charm.

https://prnt.sc/ph4egk

Best regards

Buldre

pavit Thank you for your reply. I was probably somewhat inaccurate. It is the location of the contact information and the location of the contact's image that I have problems with, not the contact form / answer form itself.

Ninja

Buldre
Hi
This is the view of the contact image : http://prntscr.com/ph7grs
It also looks fine.
It would be better if you can post the screen shot of issue and illustrate the request inside screenshot to point exact issue.

Regards

Buldre

Ninja Thank you for your reply. No, unfortunately, I do not get such results. Have tested with Samsung and iPhone. And then we have the problem with the picture coming to the far right, when reading from a PC. Please see attached photos.

NB! Please delete the photo you posted.

Samsung:

iPhone:

PC:

Ninja

Buldre
Hi
This is not issue from template, its how the Slider view of contact form work in Joomla.
You can set the default template to Protostar and check the contact page output will be same.
If there is any change let me know.
And submit site temp super user login for staff in Edit fields option in first post.

Buldre

Ninja

Hi,
No, that's not correct. With Protostar, the contact details are left aligned and with plenty of space on the right. With JA Simpli, the contact details are pressed into a narrow column on the right, so that the text is distributed on more lines than necessary.

(However, Protostar has another problem, with the "Position" of the contact partially falling behind the photo).

Please delete your screenshot as it contains contact details.

Protostar:

Buldre

Ninja Details are now provided.

saguaros

Buldre

You can try with this custom CSS:

@media (max-width: 480px) {
 #slide-contact.accordion .dl-horizontal dd {
    margin-left: 10px;
}

#slide-contact.accordion .dl-horizontal dt {
    text-align: left;
    width: auto;
}
}

Buldre

saguaros
Thanks, it works for the address field. But still, the image is positioned incorrectly, because it is right-aligned instead of left-aligned, and the text for position comes on the left side of the image, or partially above the image and partially below the image, depending on which screen you read from, instead of all text below the image. And there is no space between “Position:” and (text).

saguaros

Buldre
My above suggest helps to make it looks the same as our demo site. Could you illustrate the modification you expect via screenshots?

Buldre

saguaros
Yes, please see my last photo in my first post of October 11, below «PC».

Ninja

Buldre
Hi
Kindly fix the login http://prntscr.com/q5d9bp
each template has own style so its not same as in default Joomla.
About the responsive with the code shared it will show the full content in mobile as well in PC view.

Buldre

Ninja
The user is now enabled

Ninja

Buldre
Hi
In simpli and beez 3 the view is almost same
http://prntscr.com/q5uwhu
http://prntscr.com/q5uwnq

Do you want change in PC view or in phone.

Buldre

Ninja
It's the PC view that looks strange, with the image far to the right of everything else. I want to improve the PC view. Thanks.

saguaros

Buldre

You can try:

@media (min-width: 768px) {
  .contact .accordion-inner .thumbnail {
    margin: 20px 650px 10px 10px;
  }
}

Buldre

saguaros
Thanks, it got better, but still has some shortcomings. When reading from PC and only if the window is not expanded to full screen, it works as desired, in the following order:

[Image]
Position: [position]
[Other information]

Great! However, with the expanded window, the order is as follows

Position: [position]
---moved to the right--[Image]
[Other information]

I want the information to be displayed as it is now displayed with not expanded window, with the image at the top, and all text below the image. And that for both PC, mobile and tablet, since viewing on mobile and tablet still has some shortcomings, with text partly above, partly below and partly on the side of the image.

Hope you can help, then it can be a better template.

saguaros

Buldre

Could you illustrate the modification you expect via screenshot?

Buldre

Hi,

I want the information to appear as in the image above, for both viewing on PC, mobile and tablet, with both text and image on the left side of the screen, and with the text below the image.

saguaros

Buldre

Not sure if you override com_contact in this template or not. If not, you can copy this file:

/components/com_contact/views/contact/tmpl/default.php

paste into this directory:

/templates/ja_simpli (your default template)/html/com_contact/contact/ (Create this path if it doesn't exist)

then edit the 'default.php' file you just copied

Look for this line of code - line 82:

<div class="thumbnail pull-right">

and remove the pull-right class

Buldre

Hi saguaros
Thank's for your feedback. It seems that the problem with a very small image, now is gone also when using Chrome. But now the problem is the same with Chrome as with Edge, that the image is too far to the left for the text.

The image and the text "Position" should have roughly the same page alignment. So either move the image a little further to the right, or the whole text box a little further to the left to achieve this. Please see Buldre for screenshot.