Hide the search bar's input field

I'm in the process of creating a responsive blog with a search input feature. However, I've encountered an issue where the search form input in my sidebar isn't collapsing properly and is overflowing outside of its designated container. Below is the code snippet that I've been working on so far. Can anyone provide assistance or suggestions on how to make this layout more responsive?

 <div class="gridContainer clearfix">

 <!--HEADER--> 
<div id="LayoutDiv1">
        <div align="center">
          <!--NAVIGAIION + LOGO-->
  </div>
        <nav>
            <div class="header">

                     <div id="toplogo top" align="center"><a class="logo" href="#"></a>      </div>

<hr>    


                    <div align="center">
                      <!--navigation list items-->
                     <ul id="topmargin" class="navigation scaling">
          <li class="scaling"><a href="#"></a><img class= "invert"      src="home.png" width="160px" height="55px"></li>
          <li class="scaling"><a href="#"></a><img class="invert" src="about.png"></li>
          <li class="scaling"><a href="#"></a><img class="invert" src="contact.png"></li>
          <li class="scaling"><a href="#"></a><img class="invert" src="work.png"></li>
        </ul>

                      <hr>

                    </div>
            </div>
        </nav>
        <div align="center">
          <!--end of NAVIGATION + LOGO-->


  </div>
  <div id="LayoutDiv2" class="clearfix">

        <div id="content">            <p>This is the Content efnoifnegnrorfnoewnfdksncldncksdjcndlscnkdsncldksnclnsdl
          </p>   
        </div>


        <aside>

            <div id="sidebar">

              <div id="sidebar-content">

                <p> This is the Sidebar</p>

        <form  class=action="" id="search-form" method="get">

                <input type="text" value="search"   onblur="if(this.value=='')this.value='search'" onfocus="if(this.value=='search')this.value=''"/>

                <input type="hidden" value="submit"/>

          </form>

              </div>

          </div>

        </aside>






 </div><!--end of LayoutDiv2-->



   <div id="LayoutDiv3">
   <hr>

             <footer><!--beginning of FOOTER-->


                    <div class="footer">
                            <p>PETER</p>
                    </div>



 </footer> <!-- end of FOOTER-->

  </div>



   </div><!--end of LayoutDiv1-->





 </div>
 <p>&nbsp;</p>
 <!--end of Grid Container, HEADER, CONTENT, FOOTER-->


 And here is my CSS:

 img, object, embed, video {
max-width: 100%;
 }

 .ie6 img {
width:100%;
 }

 #topmargin{
margin-top: 5px;
margin-bottom: 5px;
 }

 form{
 padding:5px;
 word-wrap:break-word;

 }

 .logo{
background: url(PLUM%20monogram1.png);
display: block;
height: 100px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
transition: all 500ms linear 0s;
width: 56px;
z-index: 2;
margin-top:5px;
}

 .logo:hover{
background-image: url(PLUM%20monogram2.png);
transition: all 300ms linear 0s;
margin-top:5px;

}

 #toplogo{
display:inline-block;
margin-top:10px;
height:100px;
}

 .navigation{
clear: both;
margin-left: auto;
margin-right: auto;
/* [disabled]list-style: none; */
padding: 0px;
-webkit-flex-flow: row wrap;
justify-content: center;
font-size: 1.4em;
letter-spacing: 1px;
overflow: hidden;
padding-bottom: 10px;
text-align: center;
width: 100%;
display:inline;
}

 li{
 display: inline;
 list-style-type: none;
}

 .scaling{
 min-width:25%;
 display:inline block;

 }

 .invert{
 }

 .invert:hover{
-webkit-filter: invert(100%);
transition: all 100ms linear 0s;


 }


 /* Mobile Layout: 480px and below. */

 .gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
word-wrap:break-word;

 }
 #LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }

 #LayoutDiv2 {
 clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
 }

 p{
 padding:5px;
 }


 body, html {
 height: 100%;
 padding:1px;
 }

 #content{
 display:inline-block;
 float:left;
 width:80%;
 background:#F36;
 height:100%;

 }

 #sidebar{
display: inline-block;
background:#0FC;
float: left;
width: 20%;

word-wrap:break-word;
 }

 #sidebar-content{
 padding:5px;
 overflow:hidden;
word-wrap:break-word;

 }




 .search-input{
 width:70%;
  }

 .footer{
 background:#00F;
 }

 #LayoutDiv3{
 clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
 }

 @media (max-width: 480px) {

gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
word-wrap:break-word;

 }
  #LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }


 #LayoutDiv2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }
#LayoutDiv3{ clear: both;  float: left;  margin-left: 0;  width: 100%;  display: block;      }


#sidebar{ clear: both; width: 100%; }
#content{ clear: both; width: 100%; }
 }




 /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

  @media only screen and (min-width: 481px) {
 .gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
word-wrap:break-word;

}


  #LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }


  #LayoutDiv2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }

 #LayoutDiv3 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }





 /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and  Tablet Layout. */

 @media only screen and (min-width: 769px) {
 .gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
 }
 #LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }
 #LayoutDiv2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }

 #LayoutDiv3 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
 }


 }

If anyone has any tips or guidance on improving the responsiveness of this blog layout, your help would be greatly valued.

htmlcssresponsive-designblogs

Answer №1

Make sure to assign the class .search-input to your search bar.

<input type="text" 
                                       value="search" onblur="if(this.value=='')this.value='search'" onfocus="if(this.value=='search')this.value=''"
                                       class="search-input" />

UPDATE: Check out the JSFiddle link for reference http://jsfiddle.net/P6sr2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging divs precisely while rotating a Bootstrap Thumbnail

I've been experimenting with creating a "css3 on hover flip" effect for bootstrap thumbnails. It works perfectly fine on simple divs (check it out here) Here's the main CSS3 code I'm using: .front{ position:absolute; transform:pers ...

htmlcsstwitter-bootstrap

What is the best way to implement a top border effect on hover?

I am facing an issue with my category img. When I hover over it, a red border appears at the top and my title moves down by 2px. How can I resolve this problem and eliminate the extra 2px? .box { display: inline-block; backg ...

htmlcssangular

Can someone share tips on creating a stylish vertical-loading progress bar with a circular design?

Currently, I am working on developing a unique progress bar that resembles a glass orb filling up with liquid. However, due to its rounded shape, the traditional approach of adjusting the height does not produce the desired result (as illustrated in this f ...

javascriptjqueryhtmlcss

Tips for organizing components in jQuery Mobile

Displaying a survey creation form: <!-- HTML structure --> <div data-role="page" data-theme="b"> <div data-role="header"> <h1> Create Survey </h1> </div> <div id="main" data ...

javascriptjqueryhtmlcssjquery-mobile

Trouble with CSS styling for focused input fields

Attempting to style a form by Patriot with CSS, I encountered an issue. input#card-month:focus ~ label.card-label.label-cardExpiryYear { font-size: 20px !important; /* This works fine */ } input#card-month:focus ~ label.card-label.label-cardExpiryMont ...

csswordpressinputcss-selectors

Displaying JSON data with dynamic color changes in an HTML table: A comprehensive guide

Scenario: I am currently working on a project where I need to fetch data from an external json file, parse it, and then dynamically add it to an HTML table using the footable jQuery plugin. Question: I have a query regarding how to use JavaScript to parse ...

javascriptjqueryhtmlcssjson

Verify whether the user has reached the bottom of the iframe while scrolling

I currently have a simple iframe placed in the center of my webpage. The code for the iframe is as follows: <iframe class="iframe" src="http://route-to.page"></iframe> As the user scrolls down to reach this iframe, it will be assigned an addi ...

javascriptjqueryhtmliframe

Is it possible to make a div jump or bounce if it has a flex display?

I'm looking to add some interactive animation to an image inside a div when my mouse hovers over it. To better explain the issue I'm facing, I created a quick representation of what I want to achieve in the code below. My goal is to have the te ...

javascriptjqueryhtmlcssflexbox

As I resize my browser window, I notice that my menu button starts to shift upwards along the

I recently created a menu button that looks great, but I noticed that when I shrink the browser window, it starts to move slightly upwards. It's really annoying and I can't figure out why this is happening. Can someone please help me troubleshoot ...

htmlcss

I am looking to create a div that can consistently refresh on its own without needing to refresh

I have implemented a comment system using ajax that is functioning well. I am looking to incorporate an ajax/js code to automatically refresh my "time ago" div every 5 seconds so that the time updates while users are viewing the same post. Important note: ...

javascriptcssajax

Ways to extract all hyperlinks from a website using puppeteer

Is there a way to utilize puppeteer and a for loop to extract all links present in the source code of a website, including javascript file links? I am looking for a solution that goes beyond extracting links within html tags. This is what I have in mind: a ...

javascripthtmlnode.jspuppeteer

The integration of PHP code with an HTML form is causing issues

When I use the insert_teacher('bla bla','bla bla','dqsd') function in a PHP file, everything works fine. However, when I try to implement it with an HTML form, nothing is displayed and no data is inserted into my database. &l ...

javascriptphpjqueryhtmlcss

Using automatic margins with tabs in the latest version of Bootstrap, known as Bootstrap

Currently exploring Bootstrap 5 and still getting the hang of it - so please bear with me if this question seems a bit rudimentary! I've been experimenting with tabs to create tabbed panes of local content. I've followed the code provided in the ...

csstabsautomarginsbootstrap-5

How to showcase information from a pair of database tables using a DataList element in Asp.NET

I need some assistance in displaying data from two different database tables within each datalist item. Specifically, I want to show details about a job application and then use the application owner's ID to display some of their information alongside ...

c#htmlasp.netdatabasedatalist

Add a touch of flair only when all the children are identical

I have a specific request: I am looking to apply the style "list-style:none" only when there are <ol> elements without any other tags. For example, in this scenario I want to use the style: <div> <ol><li>1</li></ol> ...

htmlcsscss-selectorspseudo-class

Guide on displaying an EJS page with AngularJS on a Node.js server

Having an issue with rendering an ejs page through nodejs. The page works fine independently, but fails to load when rendered via nodejs. Any help would be appreciated. ejs page: <html> <script src="/home/aniruddha/Downloads/angular.js"></ ...

htmlangularjsnode.js

Tips for organizing a div into a dock panel

I am seeking guidance on how to align and resize the following divs based on my specific requirements outlined below. Area A Area A should remain at the top with a set height that will not change. Area B The height of Area B should vary between 0 and a m ...

jqueryhtmlcss

Top method for analyzing HTML code within Android applications

As I work on an application for my parents' restaurant, I encounter a situation where clients can access a private area on the website to view their account status post-login. After successfully logging in, I am presented with the private HTML conten ...

javaandroidhtmlparsingjsoup

Utilizing CSS to style text on a menu by applying a specific class to an unordered list element

Is there a method to use CSS to invoke a div id function that will highlight text when the mouse hovers over it? <ul class="sub-menu"> <li id="menu-item-1721" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1721">< ...

htmlcss

Function for when Tic Tac Toe results in a tie

I have developed a tic tac toe game using Javascript and now I have two questions. 1. How can I add a "start" button so that the game can only be seen or played after clicking on the button? And now for the challenging part: In case of a draw, I want t ...

javascripthtmlbuttontic-tac-toe