Form Pushing Div Position Out

  • Resolved starwag

    (@starwag)


    7 years ago

    The site I am working on has two different versions, a mobile view and a desktop view. The cell view has the search form in a completely different area than the desktop site it was originally planned for. Unfortunately, this second search form is pushing the div it is inhabiting completely out of the original design. There isn’t anything wrong with the div, as it works fine without the form. I am including the link to the page I am working on. If you downsize the window less than 600px wide, you will see what I mean. I am also including the relevant divs that are being affected. Thanks in advance for anyone who can help. 

    
	<div id="cellsearchbox">
		<div id="thrmenu" style="background: none; height: 100%; width: 10%; margin-left: 2%; display: inline-block;" onclick="openNav()">
			<div class="bar" style="background-color: white; margin-top: 30%;"></div>
			<div class="bar" style="background-color: white;"></div>
			<div class="bar" style="background-color: white;"></div>
		</div>
	<div id="searchpackage" style="background-color: white; width: 47%; height: 100%; margin-left: 2%; display: inline-block;">
						<form class="search" method="get" action="#" role="search" style=" margin: 0; padding: 0; position: relative;">
				<input class="search-input" type="search" name="t" placeholder="<?php _e( '', 'html5blank' ); ?>" style="margin: 0; padding: 0; position: relative; height: 20%; width: 88%;">
	<button class="search-submit" id="whicon" type="submit" role="button" style="height: 20%;" onclick="getSearch()"><?php _e( '', 'html5blank' ); ?><img src="http://peggyslittlecorner.com/wp-content/uploads/2019/05/search2i.png" style="height: 10px;"></button>
</form>
		</div>
						<div id="mini3" style="background: none; width: 26%; height: 100%; margin-left: 6%; margin-right: 2%; display: inline-block;">
		<div id="a3" style="background-image: url('http://peggyslittlecorner.com/wp-content/uploads/2019/05/yt_logo_mono_dark-e1559148736342.png'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 20%; height: 100%; margin-left: 0; display: inline-block;"></div>
		<div id="b3" style="background-image: url('http://peggyslittlecorner.com/wp-content/uploads/2019/05/instalogo.png'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 20%; height: 100%; margin-left: 2%; display: inline-block;"></div>	
		<div id="c3" style="background-image: url('http://peggyslittlecorner.com/wp-content/uploads/2019/05/badgeRGB-white.png'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 20%; height: 100%; margin-left: 2%; display: inline-block;"></div>
		<div id="d3" style="background-image: url('http://peggyslittlecorner.com/wp-content/uploads/2019/05/mailsym.png'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 20%; height: 100%; margin-left: 2%; display: inline-block;"></div>
		
		</div>
		</div>

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • CrouchingBruin

    (@crouchingbruin)

    7 years ago

    First of all, you may have noticed that if you view the page on Firefox, the page doesn’t display completely. It’s because there are a bunch of “mixed” content, i.e., the page is trying to reference a number of resources using http instead of https. You should convert all of those references.

    So one thing you can try is adding this rule inside a media query:

    @media screen and (max-width: 600px) and (min-width: 481px) {
   #cellsearchbox {
      display: flex;
   }
}

    This should move the search DIV back into the parent DIV (although I’m not sure why there is some CSS that makes that search DIV 100% in height; that should probably be removed so you don’t end up with all that empty white space below the actual search field).

    Thread Starter starwag

    (@starwag)

    7 years ago

    Thanks for the help! display: flex seems like it is going to work.
    Also, I changed the http: info to https: but the view on mozilla is still messed up. I thank you for pointing it out to me, though, as I had not checked the website view from there in a while. However, I will be opening another question, as I don’t really know how to fix the problem.
    Thanks again.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Form Pushing Div Position Out’ is closed to new replies.

Tags