Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • July 5, 2021 at 11:37 pm #1308842
    goldengate415

    Hi,

    I am trying to use the accordion element to embed a contact form and am running into responsive issues at 771 pixels to approximately 1380 pixels wide, so on my mobile the grey border vanishes on the right side of the screen.

    If I take the same contact form elements and put them on the page not inside the accordion element, they work fine and are perfectly responsive as you can see if you scroll down my sample page:

    https://www.thomashenthorne.com/accordion-demo/

    You can see this in Google developer tools on Chrome by making the screen narrower.

    Do you have any suggestions?

    Thanks,
    Rob

    July 7, 2021 at 9:20 am #1309058
    Ismael

    Hey goldengate415,

    Thank you for the inquiry.

    Would you mind providing a screenshot of the issue? We cannot find the border and the contact form looks perfectly fine as shown in the screenshot below.

    Screenshot: https://postimg.cc/8sGM3SWM

    Best regards,
    Ismael

    July 7, 2021 at 5:03 pm #1309133
    goldengate415

    Hi Ismael thanks for the response!
    The issue only happens on mobile and the “break point” where the issue occurs is at 400 px on Chrome Developer Tools… so if you go into CDT and narrow the view screen to 400 px, it will do it.
    Or in Firefox, go into Responsive Design Mode and it looks like attached screen shot. The elements work fine (responsive) when not in accordion element.

    Thanks much,
    Rob
    responsive design mode on Firefox

    July 7, 2021 at 5:05 pm #1309134
    goldengate415

    Attempting photo paste again:
    image

    • This reply was modified 3 years, 5 months ago by goldengate415.
    July 7, 2021 at 5:06 pm #1309135
    goldengate415

    On the forum I click “img” to upload and it doesn’t seem to work.. trying “link”

    July 9, 2021 at 4:34 am #1309330
    Rikard

    Hi,

    Thanks for the update. I can’t reproduce the problem in your screenshot on my end, I’m seeing the same thing Ismael is seeing. You can try CSS like this to adjust the padding in the toggle on mobile screens though:

    @media only screen and (max-width: 767px) {
.av-elegant-toggle .toggle_content {
    padding: 20px 35px 30px 20px;
}
}

    The values are top/right/bottom/left.

    Best regards,
    Rikard

    July 12, 2021 at 5:20 pm #1309827
    Yigit

    Hey Rob,

    I could reproduce the issue around 400px screen size.
    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
@media only screen and (max-width: 479px) {
.responsive .avia_ajax_form .form_element {
    margin-right: -20px;
}}

    Best regards,
    Yigit

    July 20, 2021 at 9:35 pm #1310938
    goldengate415

    Thanks Yigit!
    I notice a new update came out today… does that fix the issue with the accordion element or should I add this css?

    Also while we are talking elements, one little easy suggestion for Gunter… now that there are so many elements in ALB (yay!), would it be possible to alphabetize the lists of elements especially under “content elements” to help find them quicker? :)

    Thanks!
    Rob

    July 20, 2021 at 10:11 pm #1310945
    Yigit

    Hi Rob,

    Please use the CSS code.

    There is a sorting option on the top right corner that you can list elements alphabetically – https://imgur.com/a/T39DmPX :)

    Regards,
    Yigit

    July 20, 2021 at 10:48 pm #1310955
    goldengate415

    I have been using Enfold since what 2013 and never saw that I can list elements alphabetically! Thanks!!

    OK to close ticket.

    Thanks again
    Rob

    July 21, 2021 at 12:40 am #1310980
    goldengate415

    While this does fix the contact form, it does appear there is a responsive bug within that element… when I place other things in there, they break on small screens.

    July 22, 2021 at 7:25 am #1311351
    Ismael

    Hi,

    The form is not resizing correctly or it does not inherit the size of the tab container because the recaptcha container has an inline width property with a value that is greater than that of the parent container. Try to insert this code inside the css media query to resize the recaptcha container and force it to inherit the maximum width of the tab content.

    .av-recaptcha-area div, .av-recatpcha-area iframe {
    width: 100%!important;
    max-width: 100% !important;
}

    Best regards,
    Ismael

    November 1, 2021 at 2:09 am #1327244
    goldengate415

    Hi all, I tried to use the accordion element and am still having this problem even with above css code installed…. any suggestions?

    Thanks,
    Rob

    November 1, 2021 at 3:26 am #1327250
    Ismael

    Hi,

    Thank you for the update.

    This is how we see the contact form inside the accordion element on smaller screens. The input fields are resizing correctly.

    Screenshot: https://postimg.cc/nM5Mm7F3

    Would you mind providing a screenshot of the issue? What is the actual model of the device where you are testing it?

    Best regards,
    Ismael

    November 2, 2021 at 3:24 am #1327373
    goldengate415

    Hi Ismael,
    Thanks for the response and help. You are right, the Enfold contact form now works great with the padding that was added via css.

    However, my Optima Express (real estate IDX plugin) contact form breaks the same way when it’s placed in the accordion element per the first example on this page:
    https://www.thomashenthorne.com/accordion-demo/

    Do you have any css that would make this contact form “play nicely” within the accordion element? When it’s not in the accordion element it works great and has no issues on smaller screens.

    Thanks!!
    Rob

    November 2, 2021 at 12:45 pm #1327445
    Ismael

    Hi,

    Thank you for the info.

    Adding this css code should help resize the input fields in the IDX contact form.

    #ihf-contact-request-form fieldset {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
}

    Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

    Best regards,
    Ismael

    November 2, 2021 at 6:28 pm #1327515
    goldengate415

    Thank you Ismael!! That works great!!

    This is why Enfold is still #1 in support…. you could have easily said “go back to the plugin author” but instead you gave me some quick css to fix the issue.
    THANK YOU!!!

    Best,
    Rob
    (ok to close ticket)

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Responsive issue (bug?) with accordion element’ is closed to new replies.