The contact form is not fully responsive: Page 2

The contact form is not fully responsive

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

saguaros
Thanks, it got better. One exception is when reading from a tablet, where the profile picture becomes very small when the tablet is placed vertically (with the short side up), while it is otherwise displayed in normal size, please see the attached picture. However, it is not very important for me to get this detail fixed.

Ninja

Buldre
Hi
The image is small due to this code in custom.css


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

Or replace it with


@media (min-width: 768px) {
  .contact .accordion-inner .thumbnail {

 max-width:250px;
  }
}

Buldre

Ninja
Thank's for your feedback. I received the first mentioned code from one of your colleagues, see previous posts in this thread.

I'm trying the new code now, but unfortunately it does not improve when I use the Chrome browser. And when using Edge, the problem with a very small image is gone, it now appears in normal size. But the image is now displayed too far to the left also when reading from a PC. So all in all, the new code did not get any better.

Please let me know if you have a solution for this, otherwise we can just leave it as it was with the previous code. As previously mentioned, it is not very important for me to solve this last detail, which only appears when the contact form is read with the short side up on the tablet.

saguaros

Hi Buldre

Here is how it looks in Chrome in my PC: https://prnt.sc/tsy67c

Could you share screenshot of how it should be so I can help?

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.

saguaros

Hi Buldre

In the custom.css file of your site:

@media (min-width: 768px) {
  .contact .accordion-inner .thumbnail {max-width:250px; margin-left: 100px;}
}

You can adjust the 'margin-left' property to suit your need.

pinknemo13

saguaros
Thanks had the same issue and it's not resolved. .

saguaros

pinknemo13 You can create a new topic and share the credentials of your site + page to see the same issue so I can help.

Ninja

pinknemo13
Hi This issue suggestion is based on a different user site and there were different style suggestions.
I request you to open a new thread for your topic, explain the details you are facing with site URL for staff.

« Previous Page