automatic full width of the bar according to the screen

  • Resolved ashop1

    (@ashop1)


    3 years, 8 months ago

    Hello, I have been with this for months and without asking but not being able to solve it, I must open the query here.

    On my site avellanedashop.com, I put two search bars, one for mobile screens and one for desktop. But I did this because I could not get one of the two bars to automatically adapt to the full width of each screen, that is, as the amazon search bar does, which regardless of the size of the screen adjusts to cover the entire screen . width available.

    What I would like is for the Advanced Woo Search bar to be able to do it, but since I didn’t get it, I added AJAX Search for WooCommerce and after searching a lot I found some css for this bar on various forum sites and pasted it, barely achieving a result unfavorable, because it is wide but not automatically. The last bar can be approximately the size of a desktop without being too small. but I still can’t get it to fit full width automatically based on the screen.

    Could you please help me with the code that can make Advanced Woo Search adapt well so that it removes the other one and the header of my site looks good?

    the css I have at the moment for AJAX Search for WooCommerce is the following:

    .dgwt-wcas-sf-wrapp {
    zoom: 1.13;
    width: 100%;
    margin: 0px;
    position: asolute;
    background: # 14A6E3;

    minimum width: 600px;
    }
    .dgwt-wcas-no-submit {
    height: 50%;
    margin: automatic;
    maximum height: 20px;
    width: 100%;
    maximum width: 1023px;
    left: 0px;
    right: auto;
    opacity: 100%;
    fill: # 000;
    top padding: 5px

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter ashop1

    (@ashop1)

    I read in an answer from the author of the plugin this code and it works, but the width is for a certain screen because the bar is in that measure. in my case, what I need is that it fits each measure just like the amazon bar does.

    .aws-container {
    width: 400px;
    }

    the truth is I don’t know about code and that is why I have been dealing with this issue for months without being able to solve it … I would greatly appreciate your help.

    Thread Starter ashop1

    (@ashop1)

    https://stackoverflow.com/questions/30154633/css-search-box-will-be-automatically-resize-base-on-windows-size-using-flexbox

    Here I found a page where they talk about this, the effect seems to be called flexbox. the problem in me is that I do not know the code or what to put exactly for this bar.

    Plugin Author ILLID

    (@mihail-barinov)

    Hi,

    Well as I see you can simply use following css

    .aws-container {
width: 100%;
margin: 0px;
min-width: 600px;
}
    • This reply was modified 3 years, 8 months ago by ILLID.
    Thread Starter ashop1

    (@ashop1)

    I understand, thank you for your reply.

    but this way it looks the same width on a mobile device screen and on a desktop one, right? … what I need is it to adjust automatically as I think it works with flexbox, sorry for the inconvenience

    Plugin Author ILLID

    (@mihail-barinov)

    This code will make search form full width on desktop and mobile devices. But their width won’t be the same.

    Thread Starter ashop1

    (@ashop1)

    I apologize but this does not work for me, by putting 600px in min-width what it takes is that the minimum width is 600px but it does not distinguish if it is seen on one screen or another, in this case it maintains the same width on all screens, thus exiting the screen of the mobile device.

    I think it’s something like @media to differentiate the width on each device, but I don’t know how to use that code. could you help me with that please?

    Thread Starter ashop1

    (@ashop1)

    hello, sorry for the inconvenience. I tried exactly what you indicated in your comment but it doesn’t work for me. How can I apply css so that the bar fits to all the available width regardless of the size of the screen in the header as well as the amazon bar does?

    Plugin Author ILLID

    (@mihail-barinov)

    Well all the trick is done by

    width: 100%;

    style. Its make search form be header full width. Min width style just set some minimal value for the search form. You can remove this style at all.

    Thread Starter ashop1

    (@ashop1)

    Thank you

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘automatic full width of the bar according to the screen’ is closed to new replies.