CODEWITHSUNDEEP
htmlcssbutton
Rick van Baalen
Rick van Baalen

Reputation: 381

CSS Responsive Button

My website is https://www.webovo.nl. On the https://www.webovo.nl/blog/ page in the top-right corner, i have a blue 'Zoeken (Search)' Button and a search text field above it. I have made the button "width: 100% !important;", but i want the search field to be the same width as the search button. i have changed the width of the search field (input[type="search"]) into 100% !important but nothing changed.

When i change the width of my google chrome browser, i see that the button will become the same length as the search field at some point. When the browser reaches the width of a mobile phone, the button drops down to the bottom of the page and it becomes bigger then the search field again.

Where am i going wrong? I hope u can find the solution by inspecting the elements and the source code of www.webovo.nl

Thanks

Upvotes: 0

Views: 215

Answers (2)

Miten Patel
Miten Patel

Reputation: 121

You can add your custom style in to stylesheet. Add this class in to your stylesheet:

form.search-form label { width: 100%; }

Upvotes: 1

Zahid Saeed
Zahid Saeed

Reputation: 1171

Issue is solved! The search field is in the <label> tag which has the styling of display:inline-block. You have 2 options here:

1) Either change the display level of that parent <label> to block

OR

2) Give that <label> a property of width:100%

Hope that helps you :-)

Upvotes: 1

Related Questions