Static placement reacting promptly

I am currently experiencing an issue where the content keeps scrolling to the right with the page when resized. I would like it to remain in the same position when resized. To help illustrate the problem, I have created a Codepen. It seems that the div containing the p tags is not behaving as fixed and instead the p tags are adjusting based on the page size.

Check out the Codepen here

<div id = "contents">
<div class = "add" align = "center">
<p id = "entry" style = "position: fixed; margin-left:1163px; margin-top:415px;">One</p>
</div>
</div>

CSS

#contents .add{
width: 1600px;
height: 750px;
margin: auto; 
position: fixed; 
top: 0; bottom: 0; 
left: 0; right: 0;
font-family: "Cedarville Cursive","Lato";
}

#contents{
width: 1600px;
height: 750px;
margin: auto; 
position: absolute; 
top: 0; bottom: 0; 
left: 0; right: 0;
font-family: "Cedarville Cursive","Lato";
}

Answer №1

To remove the issue of the #contents .add element centering itself on viewport sizes larger than 1600px, you should eliminate the margin: auto; property from the styling.

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

Integrate JavaScript with WordPress

How can I get this functioning properly within Wordpress? I have been attempting to connect everything together, but it doesn't appear to be working. Is this the correct way to do it, or am I overlooking something? <script type="text/javascript" s ...

The OK Button Dialogbox is currently malfunctioning

While using jQuery for a dialog box, I encountered an issue when trying to delete an element within it. After clicking the ok button, the dialog box did not redirect or close itself properly. The initial content in the dialog box seems to work fine. < ...

Sequentially loading Bootstrap columns as the page loads

Is there a way to load columns one by one with a time gap when the page is loaded? Here's the code snippet that can achieve this: setTimeout(function() { $("#box1").removeClass("noDisplay"); },1000); setTimeout(function() { ...

Tips for implementing events with AngularJS Bootstrap Colorpicker

I am having trouble understanding how events function with Angular Bootstrap Colorpicker. I have forked a Plunker from the developer's example. Unfortunately, there are no examples provided for using events. It would be great if events like colorpick ...

Ways to create a separator or divider between rows in a table

I'm currently working on creating a table layout and I want to include dividers similar to those seen on this website. Specifically, I am looking to have thin grey dividers between rows. I've attempted the following code, but it doesn't seem ...

steps for embedding a video with a URL

Here's a question for you: Is there an easy way to embed a video using just the URL, without having to deal with complicated 'embed codes' like <iframe src="http://player.vimeo.com/video/41406753?byline=0&amp;portrait=0" width="500" ...

The text for the Google chart is nowhere to be found

After creating a test project using the Google Chart example, I noticed that some text from the chart is missing after adding CSS. Here is the CSS code I used: html, body { font-size: 100%; height: 100%; width: 100%; } body { background: ...

Storing various data in separate tables using MySQL and Node.js

Currently, I am working with three tables - user, modules, and an intermediate table called user_module. To perform an inner join between the user and module tables, I need to access the user_module table. "SELECT user.uName, module.moduleName FROM user_m ...

I'm having trouble getting my jQuery to connect with my HTML, no matter what I do

UPDATE: Thank you everyone, I finally figured out that it was the API causing the issue. Even though I downloaded the files to avoid server requests, I will switch to using https instead. I have a couple of questions. Why isn't my code functionin ...

Switch the background image of one div when hovering over a different div

Can anyone assist me with creating an interactive map where continents light up as you hover over them? I am using multiple images within div elements in order to achieve this effect. Specifically, I want to change the background image of one div when hove ...

Implement a fullscreen hero image on a specific blogroll template page in Wordpress

My portfolio website uses custom page templates for each page. The blog page is not the landing page, but an interior page. I have been able to add a custom hero image to every page template except for the blog page. Currently, I am using the content.php p ...

What is the best way to create a button with a dynamic background animation in React?

Looking to design a button with an animated background, possibly in gif or video format. An example of what I have in mind is the DOWNLOAD button on this website's main page: Ideally, I am hoping for a solution using React. ...

Guidelines for calculating the CRC of binary data using JQuery, javascript, and HTML5

Can you please assist me with the following issue? Issue: I am currently reading file content using the HTML5 FileReaderAPI's ReadAsArrayBuffer function. After storing this buffer in a variable, I now need to compute the CRC (Cyclic Redundancy Check) ...

Is it possible to consolidate several font names under a single alias in CSS?

Is it possible to use a single alias for multiple font names in CSS? For example, if I have font-family: 'Font A', 'Font B', 'Font C', ..., sans-serif; Can I simplify this to just one name to refer to all those fonts, like t ...

Navigate to the middle of a DIV container in Angular 7

Is there a way to programmatically scroll to the center of my element on both the Y and X axes when a specific function is executed? My HTML structure includes the following (I am aiming to scroll to the middle of #viewport): </div> <div # ...

Tips for creating a gradual fade-out effect on a bootstrap modal window

One issue I'm facing is with my modal dialog (#busyIndicator). It simply displays a message that reads "Please Wait". Sometimes, the operation it's tied to completes so quickly that the visual transition between showing and hiding the dialog beco ...

What advantages come with using PHP comments instead of HTML comments within HTML code?

Word on the street is that there might be, so I wanted to confirm. CSS comment: <!-- Comment your styles here. --> JavaScript comment: <script> // Add your comments here </script> ...

angularjs issue with displaying data in ui-grid

Seeking assistance on implementing data display using ui-grid. Currently facing an issue where the grid is not showing any data, although when using a table with <tr ng-repeat="transaction in savingaccountdetails.transactions>, the data is displayed ...

Jekyll is detecting invalid XML entity references

My blog is powered by Jekyll and hosted on GitHub Pages. I've noticed that Jekyll sometimes incorrectly XML escapes a special character as &tt;. For example, in the RSS feed located at this link, the source XML: </p> <p> is transfo ...

Elements are receiving CSS properties from other elements within the same component

I'm encountering an issue with my components: 1. I cannot seem to style html and body in signin.component.css for some reason. The workaround I found was using: encapsulation: ViewEncapsulation.None ==> This works perfectly However, when I switch ...