Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 1, 2016 at 4:42 pm #591646
    DGC

    Hello,

    I’ve managed it to get the ajax search form in the secondary nav on mobile devices, but I want the form to be at 100% screen width.

    Thanks in advance!

    March 1, 2016 at 4:48 pm #591655
    Yigit

    Hi De Groot!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px) {
.avia-search-tooltip { width: 480px; }
#top #searchform>div { max-width: 480px; }}

    Best regards,
    Yigit

    March 1, 2016 at 4:56 pm #591664
    DGC

    Thanks for your help, but unfortunately this doesn’t work.
    You can look at my website for example.
    I just want it to be at the same width as the screen; 100%.

    March 2, 2016 at 3:54 pm #592127
    Yigit

    Hi!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 480px) {
.avia-search-tooltip {
    margin-left: -143px;
    width: 316px;
}}

    and it should like following – screenshot in private content field

    Best regards,
    Yigit

    March 2, 2016 at 4:41 pm #592175
    DGC

    Thanks again, this works, but when the screen gets wider, it’s not on the full width of the screen anymore.
    E.g., if the screen-width is 420px, the input form has to be 420px wide as well, and so on. So basically 100% width.
    I’ve tried to replace the default width of 300px to 100%, but then the input form becomes very small.

    Thanks in advance!

    March 4, 2016 at 4:35 pm #593346
    DGC

    Please help me

    March 7, 2016 at 5:40 pm #594474
    Yigit

    Hey!

    You are going to need to adjust the CSS code for each screensize respectively. Under which pixel would you like to make search fullwidth?

    Cheers!
    Yigit

    March 8, 2016 at 11:34 am #594940
    DGC

    I want it to be at 100% width under 768px.

    March 10, 2016 at 8:00 am #596123
    Ismael

    Hi!

    Please add this in order to adjust the search bar:

    @media only screen and (max-width: 767px) {
.avia-search-tooltip {
    box-shadow: none;
    top: 50px !important;
    margin-left: 0;
    width: 750px;
    position: absolute;
    margin-left: -575px;
}
}

    Create new css media queries for different screen sizes.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.