You need to maipulate your css more, specifically the width. In it's most basic form you need to edit the following:
input {
width: calc(100% - 50px); // This is 100% width of the parent minus the total width of the <a> search button positioned on the RHS.
}
The above section of code inherits the width of the parent. Therefore you will need to determine if the parent (i.e. container) should have a max-width or min-width and what its display should be so that you can manipulate how the children are to be displayed depending on the number of children. These bits are optional however.
NB: This is where variables are important so that you can do this (SASS):
TheSheriff
Co-Founder, Founder, Entrepreneur & Problem Solver
You need to maipulate your css more, specifically the width. In it's most basic form you need to edit the following:
input { width: calc(100% - 50px); // This is 100% width of the parent minus the total width of the <a> search button positioned on the RHS. }The above section of code inherits the width of the parent. Therefore you will need to determine if the parent (i.e. container) should have a
max-widthormin-widthand what itsdisplayshould be so that you can manipulate how the children are to be displayed depending on the number of children. These bits are optional however.NB: This is where variables are important so that you can do this (SASS):
$width-50: 50px; input { width: calc(100% - $width-50); } a { width: $width-50; }