Steer clear of posting additional content that might bump the existing content further up

How can I keep the search bar centered on the screen, even when content is added below it? Here's a screenshot illustrating the issue:

https://i.stack.imgur.com/7pQ1q.png

The text in the image is causing the search bar to move up, but I want the search bar to always stay at the center of the screen with all text flowing below it. I'm currently using flexbox for layout. Below is a snippet of my code:

/* YOUR CUSTOM STYLES GO HERE */

* {
  outline: none !important;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  border: 0;
  margin: 0;
}
<!---Other CSS styles and formating script contents here-->

I would greatly appreciate any assistance you can provide. Thank you in advance!

htmlcss

Answer №1

If you examine your code, take note of the .wrapper { - it should be evident that any additional content you insert inside it will affect the position of the three desired elements (title, search, and link), pushing them upwards.

Alternatively, if the combined height of the three elements remains unchanged, you could utilize:

padding-top: calc(50vh - <half form height px>);

For example:

/*QuickReset*/*{margin:0;box-sizing:border-box}html,body{height:100%;font:14px/1.4 sans-serif;}

.content {
  margin: 0 auto;
  max-width: 60%;
}

#aboveTheFold{
  min-height: 100vh;
}

#searchForm {
  padding-top: calc(50vh - 40px); /* minus half form height */
  text-align: center;
}
<div class="content" id="aboveTheFold">

  <form id="searchForm">
    <h1>WIKIPEDIA VIEWER</h1>
    <input name="search" tyle="text"><input type="submit" value="VIEW">
    <p><a href="#">Tell me what to read</a></p>
  </form>

  <p style="height:200vh;border:4px dashed blue;">Lorem ipsum longis textis...</p>
</div>

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

Why is it not possible for me to choose an element after it has been placed within a grid component?

Struggling to eliminate the blur effect on an image inside a grid element? It seems modifying the properties of an element within a grid class is causing some issues. To simplify, I conducted a basic test: I managed to change the ppp2 class when hovering ...

javascriptjquerycss

Craft a Unique Responsive Background Design

I'm eager to create a background like this, but I'm struggling to figure out the best approach. My attempt with transform: skewY(-6deg) ended up skewing my entire page instead of just the background. Could someone please assist me in finding th ...

htmlcssbackground

Tips for displaying cards with responsive design utilizing Bootstrap 5

How can I display cards responsively for mobile, desktop, and iPad? My goal is to have: - One column for mobile - Two columns for iPad - Four columns for desktop The current code only works for mobile and desktop, not for iPad. On my iPad, it's sh ...

cssresponsive-designbootstrap-5

Showing a JSON file in an HTML page

I've been attempting to showcase a local JSON file on an HTML page. I stumbled upon some information online, but it's causing me quite a bit of confusion. Here is the JSON file I have: { "activities": [ { "name": "C:&bs ...

javascripthtmljson

Ways to eliminate the white background placed behind the arrow on my bootstrap carousel

I've been attempting to create a video carousel using Bootstrap 5, and one issue I'm encountering is the appearance of a white background when hovering over the arrow. Normally, it shouldn't display a background, but for some reason, it does ...

htmlcsstwitter-bootstrapbootstrap-5bootstrap-carousel

The process of organizing and arranging the content that appears on a webpage is in

Seeking a solution to achieve a similar effect like this example. Wanting the sections to transition nicely when clicked on. Should I use a Jquery plugin or implement it with CSS? ...

javascriptjqueryhtmlcss

Fade-In and Fade-Out CSS Effect with Background Images Displaying a Blank Last Image

I've been experimenting with applying a CSS-only background image transition to a div, but I encountered an issue where after cycling through three specified images, the background reverts back to the original black color. Even stranger, when I adjust ...

htmlcss

Adjusting the width of the final card in the deck grid

Currently, I am utilizing angular-deckgrid for image display purposes. Within a container, there are two columns in which images are displayed with the column-1-2 class according to the documentation. However, in certain scenarios where only one image is p ...

angularjscssangularjs-ng-repeat

When hovering, the CSS animation will rotate an additional 45 degrees

Currently, I have an element set to rotate 45 degrees when the website is displayed, and this functionality is working as expected. However, I am now looking to enhance it further by making the element rotate an additional 45 degrees every time it is hover ...

htmlcssanimationrotation

What caused Safari to only show half of the page?

Whenever I browse my website using Safari, I noticed that if the total size of the content on the first page is less than 100vh, Safari ends up cutting off half of the page. To fix this issue, I added a CSS rule in the body setting min-height to 110vh wh ...

cssreactjsnext.jssafari

Issue with vertical alignment in form input text area not functioning properly

Need some help aligning inputted text with the top of a textarea on an HTML form. I've scoured forums for solutions, but no luck so far. I attempted using: textarea{ vertical-align:top;} and input["textarea"]{ vertical-align:top;} Tried adding ...

htmlcsstextareavertical-alignment

Leveraging CSS nth-child selector in conjunction with ngFor in angular2

Looking for a way to style odd and even rows differently in my dynamically generated table using ngFor directive in angular2. *ngIf="AreThereMyOldMessages" *ngFor="let oldm of MyOldMessages;let i=index" *ngIf="AreThereMyNe ...

cssangularcss-selectors

Easily generate a hierarchical layout in HTML with this straightforward method

I'm currently working on implementing a hierarchical tree structure for a website. I need to organize a user's projects, tasks, and sub-tasks in a visually appealing manner using HTML elements. Any suggestions or creative ideas are welcome! ...

c#htmlcssvisual-studio

Numerous links were chosen and multiple div elements were displayed on the screen

Currently, I have a setup where selecting one div will show its content. However, I am looking to enhance this by allowing multiple divs to be displayed simultaneously. For example, if 'Div 1' is selected and shown, I want the content of 'Di ...

javascriptjqueryhtmlcsstwitter-bootstrap

The drag functionality can only be used once when applied to two separate div elements

Recently, I came across an issue where I have both an Image and a custom text element placed between them using an input box. My goal is to make both the text and the image draggable on the page. However, I noticed that while the image can be dragged and d ...

javascriptjqueryhtmlcss

Fill Dropdown Menu Using Data Retrieval From Database

I am trying to figure out how to populate a drop down list (also known as a Select element) with data from a SQL Server query. The goal is to fill the list with results from Select storeName from storeinfo, which should give around 30 items that I want di ...

phpjqueryhtmlajax

Gradually appear with jQuery while maintaining current position

Exploring Display Options In my current setup, I have text that initially has a display:none property, and jQuery is applied to fadeIn() the content. The challenge lies in the fact that since the text is centered, as each word appears, the positioning on ...

javascriptjquerycss

What is the best way to selectively add multiple classes to a single Material UI classes attribute based on certain conditions?

I am trying to use the Material UI Drawer and wish to add a class named "paperStyle" to the classes prop with the rule name "paper" and then, under certain conditions, apply an additional class called "specialPaperStyle" for specific users. However, I have ...

cssreactjsmaterial-ui

Enable landscape mode exclusively for tablet and mobile devices, excluding desktop users

Looking to rotate content on tablet and mobile devices without affecting desktop view. Attempted solutions: rotate(90deg) -> Didn't work as it rotated even on desktop @media screen and (orientation:lanscape) -> Also didn't work as it ...

jquerycss

How can I adjust the size of the renderer in Three.js to fit the screen?

Encountering issues with the code snippet below: //WebGL renderer renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); //TODO: set optimal size document.body.appendChild(renderer ...

javascripthtmlcssthree.js