Stopping raised div from shifting according to screen width

I am seeking a solution to prevent a div from moving up on mobile devices with smaller widths. While I understand that this can be achieved with media queries, I am curious if there is a more elegant approach.

.wrapper {
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 23%;
  overflow: hidden;
  text-align: center;
}
#titlebackground {
  background: rgba(0, 0, 0, .5);
}
#title {
  font-family: Consolas, monaco, monospace;
  text-align: center;
  font-size: 5em;
  font-weight: 900;
  color: #fff;
  display: inline-block;
}
#titlelocation {
  position: relative;
  top: -50px;
}
<header>
  <div class="wrapper">
    <div id="titlelocation">
      <div id="titlebackground">
        <span id="title">My Title</span>
      </div>
    </div>
  </div>
</header>

Is there a way to elevate the title above the center of the div without it moving further up at lower resolutions?

Edit: To replicate the issue, run the code snippet in full screen and then adjust the screen width. The div will move upwards as the screen size decreases.

htmlcss

Answer №1

When designing your website, consider using a fixed padding in pixels for the .wrapper element instead of a percentage-based padding like padding-top: 23%. This will ensure that the padding remains consistent across all devices, from mobile to desktop.

.wrapper{
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 100px;
    overflow:hidden;
    text-align: center;
}

Answer №2

Instead of using percentage in your CSS, you can opt for the vh unit and assign your desired value to it. The vh unit is based on the height of the device.

.container {
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 65vh;
  overflow: hidden;
  text-align: center;
}
#bg {
  background: rgba(0, 0, 0, .5);
}
#heading {
  font-family: Consolas, monaco, monospace;
  text-align: center;
  font-size: 5em;
  font-weight: 900;
  color: #fff;
  display: inline-block;
}
#subheading {
  position: relative;
  top: -50px;
}
<header>
  <div class="container">
    <div id="subheading">
      <div id="bg">
        <span id="heading">My Heading</span>
      </div>
    </div>
  </div>
</header>

Answer №3

If you're searching for the perfect solution, consider utilizing absolute positioning:

.container{
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
    overflow:hidden;
    text-align: center;
}
#headerdesign {
     background: rgba(0 , 0 , 0 , .5);
}
#headertext {
      font-family: Consolas, monaco, monospace;
      text-align: center;
      font-size: 5em;
      font-weight: 900;
      color: #fff;
      display: inline-block;
}
#headingposition {
    position: absolute;
    bottom: 65%;
    width:100%;
}
<section>
      <div class="container">
        <div id="headingposition">
          <div id="headerdesign">
            <span id="headertext">My Title</span>
          </div>
        </div>
      </div>
    </section>

UPDATE: While using vh as units for padding is an option, it may not be compatible with all browsers, especially older versions.

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

Discover the new SASS color theme in Bootstrap 5.3 with the addition of Subtle and Emphasis classes for

I'm in the process of enhancing my Bootstrap SASS theme with a new color scheme. I have a customized file that includes modifications and introduces a new color: GOLD. After conducting extensive research and reading various resources, I successfully ...

csstwitter-bootstrapbootstrap-5saas

Layering an HTML page on top of another

I am trying to display one HTML page on top of another. I attempted to link the other page within a div, following the example on this page: However, when clicked, the control navigates to the linked page instead of overlaying it on the current page. Can ...

jqueryhtmlcss

SQL - Extracting Information from HTML in a Column

I have a column named "Content". Within this column, there is HTML code containing various data. My task is to extract specific information from this HTML code and split it into five different columns: "Name", "Surname", "Email", "Telephone", and "Message" ...

htmlsql

Adjusting the Transparency of the Background in a Pop-Up

I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping th ...

javascripthtmlcsspopup

Troubleshooting issues with rowspan in a Datatable

I am currently utilizing jQuery DataTables to display my grid data and implementing the rowspan concept with the rowsGroup option. Initially, it works well by spanning some rows and looking visually pleasing, but eventually, it starts failing. Here are so ...

javascriptjqueryhtmldatatables

With the addition of a key element in the opening statement

Take a look at this code snippet: <div class="content"> This is some title<br/> Some text<br/> And maybe more text. </div> I am trying to wrap the first sentence with a <span> tag before the <br/> element, like s ...

jquerycss

Is it possible to fetch all the content contained within each set of <p> and </p> tags within a specific ID?

I've been trying to extract text between two specific <p> tags in HTML, but my code is only returning the text between a single tag. Here's what I have so far: > var myHTMLString = try String(contentsOf: myURL, encoding: .as ...

htmlswiftparsingtexttextview

What is the best way to keep an image in place so that text doesn't shift it?

TLDR: I am struggling with keeping an image in place on my website while text is dynamically added to the screen above it using JavaScript. In my coding course, we were tasked with creating a calculator that calculates total costs based on user input. I w ...

javascripthtmlcss

Adjust the parent container to match the height of the child container when it is being hovered

I have been searching for a solution to this issue, but none of the answers I found seem to work in my specific case. Currently, I have a "Mega Menu" with links on the left side that expand when hovered over, revealing hidden links with images on the righ ...

htmlcss

The foundation grid system is not being implemented

How come my div is not affected by the foundation grid system: render: function(){ var {todos,showCompleted,searchText} = this.state; var filteredTodos = TodoAPI.filterTodos(todos,showCompleted,searchText); return ( <div> ...

cssreactjswebpacksasszurb-foundation

Making a switch from one image to another - JavaScript

I need a solution to swap out an image that is used in multiple locations on a webpage. Consider this sample HTML page: <html> <head> </head> <body> <img id="1" src="example.com/img/1889.png"> <d ...

javascripthtmlcss

Ways to obtain an attribute through random selection

Figuring out how to retrieve the type attribute from the first input element: document.getElementById('button').addEventListener('click', function() { var type = document.querySelectorAll('input')[0].type; document.getE ...

javascripthtmlattributes

Is there a way to stop users from altering form values on a webpage by using the "inspect" tool in their browser?

Currently, I am developing an application using node.js and handlebars as the view engine. One issue I am facing is that when a form is submitted, it inserts data into the database. The problem arises because the form passes values that are hidden from the ...

javascripthtmlnode.js

Matching multiple divs with different ids in PHP using preg_match_all and regex

I have an HTML page structured like this: <!DOCTYPE html> <html> .... <body> <div class="list-news fl pt10 "> Blue </div> <div class="list-news fl pt1 ...

phpjqueryhtmlcssregex

Styling CSS to place an image in between text and background coloring

As I try to replicate a happy accident of mine, which originally occurred during my first attempt at CSS: I was just randomly adding selectors when I stumbled upon this unique layout. However, as I proceeded with rewriting the file, I failed to save the o ...

htmlcss

CSS-exclusive dropdown menu elements peeking out

I have been working on a CSS-only drop-down menu and I am encountering an issue where other content seems to be showing through. Despite my efforts, I can't figure out why this is happening. If you would like to take a look, here is the link: http:// ...

css

Show JSON information from a jQuery post request

Greetings, I am currently working on implementing a login script using Ajax. My objective is to retrieve and display data such as email and username, and then store it in local storage. Although I can successfully obtain the data in JSON format, I want to ...

javascriptphpajaxjsonhtml

Trigger the OnAppend event for a jQuery element upon its insertion into the DOM

After writing a code snippet that generates custom controls, I encountered an issue where the custom scrollbar was not being applied because the element had not yet been appended to the DOM. The code returns a jQuery element which is then appended by the c ...

javascriptjqueryhtml

Contains a D3 (version 3.4) edge bundle chart along with a convenient update button for loading fresh datasets

I am looking to update my D3 (v3.4) edge bundling chart with a new dataset when a user clicks an 'update' button. Specifically, I want the chart to display data from the data2.json file instead of data1.json. Although I have started creating an u ...

javascripthtmld3.js

Retrieve the input name array key value using jQuery from the adjacent TD

It's a tough one to summarize in the title, but here is the code snippet that explains it: <tr class=""> <td> <input value="9" name="set[122][order]"></input> <input class="set-id ...

phpjqueryhtml