Home Forums Archived Forums Weaver II Theme search shortcode explorer 9

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #18100
    talgo
    Participant

    hi.

    i am using search shortcode in text widget. it works great on chrome but on explorer the width of a search field is to wide. any ideas what can i do?
    this is my website  http://avital-cpa.co.il/
    #23779
    scrambler
    Moderator

    The width of the search input filed is set at 193px, reduce it. Ideally all these width should be set in percentages so they can adapt to the container size

    By the way the whole point of using weaver theme is because it is responsive and will adapt to any browser size, even on mobile.

    You have added a fixed width to you site that prevents it from scaling down, so when we reduce the browser size, things get cutoff.

    This is a very bad idea in this day and age….

    #23780
    talgo
    Participant

    hi @scrambler.

    if i will reduce the 193px width so the search field on chrome gonna be to narrow.

    the fixed with of the site was added during the search for the solution to my problem of the search field. right now the site is responsive but the problem is the same.
    how can i set the width of the search field in percentages.
    #23781
    scrambler
    Moderator

    OK so two things.

    1-width in percentage:

    What are you using to create your search box? B
    Because normally the search widget automatically uses % in weaver.

    2- The reason the dimension was not working, is because the search input box has 28px left padding and 10px right padding that are not accounted for in the width of the box on IE but are on chrome. This probably comes from the fact that this element does not have a defined box-sizing property (the one that defines if padding is included in the width or not) and the default ends up being different on the 2 browsers.

    Again, the search widget in weaver normally takes care of all that.

    So if you are not using the search widget but a manually constructed one, you will need to change the inline style of the search input field to

    style=”-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;”

    #23782
    talgo
    Participant

    hi @scrambler i  tried  to use the weaver search widget but I just couldn’t center it properly.

    now i am using weaver text widget and weaver search shortcode.
    i am not a professional css user, so i have no idea where to put the code (style of the search input field) that you gave me.
    #23783
    scrambler
    Moderator
    If you are using weaver search shortcode, then I guess it is weaver’s fault 🙂
    Something does appear to have change as when I set the width now, it contains the padding
    To change the width, add the rule below in Advanced Options > Head Section > Custom CSS Rule box
    .searchform input#s {width:100% !important;}
    You also need to do that for your contact form. Normally the plugin you are using should allow you to set the width of the form in percentage instead of a fixed width.
    If you really cannot find how to go that with the plugin, you could use the rule below (in the same location as the one above) to override the current rules
    body .cf7-style.cf7-style-312 input, body .cf7-style.cf7-style-312 {width:90%;}
    If the search box still has the wrong size on some browsers, post back with the above changes in place
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘ Weaver II Theme’ is closed to new topics and replies.