{"id":5480779,"date":"2014-11-14T10:59:09","date_gmt":"2014-11-14T10:59:09","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/resize-center-element-outer-elements-fixed-width\/"},"modified":"2016-08-22T12:34:43","modified_gmt":"2016-08-22T12:34:43","slug":"resize-center-element-outer-elements-fixed-width","status":"closed","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/resize-center-element-outer-elements-fixed-width\/","title":{"rendered":"Resize center element, outer elements fixed width"},"content":{"rendered":"

I’ve searched several threads looking for this answer and I still can’t make this work…<\/p>\n

I’m trying to make the input element resize with the screen and elements while keeping the outer elements fixed width.<\/p>\n

here is the page I’m trying to fix:
\nhttp:\/\/www.jackrabbit.host<\/p>\n

here is an example of what I need:
\nhttp:\/\/www.jackrabbit.host\/images\/resizeexample.jpg<\/p>\n

(I’m using media queries, this fix will be added to the appropriate media query)<\/p>\n

Here are the div ID’s I have for the elements (these are for the full width media query so the styles are incorrect for the narrow browser width):<\/p>\n

#home_domainchecker {\n\n\twidth: 648px;\n\tpadding:5px;\n\n\t}\n\n#home_www {\n\n\tmargin: 10px 0px 0px;\n\tposition: absolute;\n\tfont-size: 18px;\n\t}\n\n#home_domaininput {\n\n\tmargin: 0px 0px 0px 52px;\n\theight:40px;\n\tfont-size:18px;\n\twidth:642px;\n\t}\n\n#home_selector {\n\n\tposition:absolute;\n\tmargin: -40px 0px 0px 700px;\n\t}\n\n#home_domainbutton {\n\n\tposition: absolute;\n\tmargin: -40px 0px 0px 805px;\n\twidth: 90px !important;\n\theight: 40px;\n\tfont-size: 18px;\n\t}<\/code><\/pre>\n
and here is the html I’m working with:<\/p>\n
<div id="action" class="clearfix box padding-box">\n\n<form action="http:\/\/www.jackrabbit.host\/high-speed-hosting\/whmcsportal\/domainchecker.php\/?" method="post" id="home_domainchecker">\n\t<input type="hidden" name="direct" value="true"\/>\n\t\t<div id="home_www">www.<\/div>\n\t\t\t<input type="text" name="domain" size="20" placeholder="Choose a new domain" id="home_domaininput"\/>\n\t\t\t\t<div id="home_selector">\n\t\t\t\t\t<select name="ext">\n\t\t\t\t\t\t<option>.com<\/option>\n\t\t\t\t\t\t<option>.net<\/option>\n\t\t\t\t\t\t<option>.org<\/option>\n\t\t\t\t\t\t<option>.us<\/option>\n\t\t\t\t\t\t<option>.info<\/option>\n\t\t\t\t\t\t<option>.biz<\/option>\n\t\t\t\t\t\t<option>.uk<\/option>\n\t\t\t\t\t\t<option>.name<\/option>\n\t\t\t\t\t\t<option>.ca<\/option>\n\t\t\t\t\t\t<option>.co<\/option>\n\t\t\t\t\t\t<option>.eu<\/option>\n\t\t\t\t\t\t<option>.co.uk<\/option>\n\t\t\t\t\t<\/select>\n\t\t\t\t<\/div>\n\t\t\t<input type="submit" value="Go!" id="home_domainbutton"\/>\n<\/form>\n<\/div><\/code><\/pre>\n
I’m sure it’s a simple fix but I’m not an expert. I appreciate the help in advance!<\/p>\n
– Clint<\/p>\n","protected":false},"template":"","class_list":["post-5480779","topic","type-topic","status-closed","hentry","topic-tag-responsive-css"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/5480779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/5480779\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=5480779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}