What are some strategies for maintaining the flow of my content when the user adjusts the size of their window?

Check out this code pen: http://codepen.io/mlynn/pen/myaeea

I am looking to keep everything in a consistent position at all times, with white space on the sides when fullscreen and potentially removing it when the window is resized small (similar to stackoverflow).

How can I achieve this? I've experimented with changing percentage widths to pixels, as well as using min-width and max-width properties, but so far no success.

In simple terms, I want to replace every instance of:

width:50%

with

min-width:500px;
max-width:500px;

I also attempted wrapping the entire body in a div with specific width/height properties, but that didn't yield the desired outcome either.

Additionally, I tested setting positions to "fixed" and "absolute," but encountered challenges with those approaches as well.

javascripthtmlcssresize

Answer №1

adjust your body's CSS

body {
  /*background:url('');*/
    background-color:#1E1F21;                       /*Background Colors*/
    position:fixed;
    width:1400px;
    height:1440px;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    font-size: 16px;

}

You successfully used position:fixed but it was placed incorrectly, this can cause your items to stay in the same place. Adjust the width and height values as needed for your design requirements.

preview : http://codepen.io/anon/pen/YPdyGJ

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

How to centralize a div using jQuery when its width is not known

I have a fixed position div that I want to center in my browser window. Although it can be done with CSS, the issue is that I am dynamically changing the element's width multiple times (due to loading content via ajax), which means the width changes ...

jquerycsshtmlcenter

Ways to change the default blue dropdown color in the Chrome browser

When you click on the drop-down menu, a blue color appears when hovered over. I want it to be red instead, but for some reason, it's not working in Chrome browser. Here is the CSS class that I have used: option:checked { box-shadow: 0 0 10px 100p ...

cssasp.net-mvc

What is the procedure for including a js file in typescript?

I am trying to import a js file in typescript and access objects and functions within the file. I have added the js file in index.html, but it is not working as expected. I tried using "import '[js file path]'" but it did not work. import { Comp ...

javascriptangulartypescriptionic2

What is the method for delivering a FastAPI response without causing the user to be directed to a different page?

I have developed an API using FastAPI that receives form-data from an HTML page, processes the data, and then returns a completion message after a short moment. Below is my backend code: from cgi import test from fastapi import FastAPI, Form, Request from ...

pythonhtmlformsfastapi

Can the Flash Configurator be converted to PHP or Javascript?

Considering converting this flash application into either PHP or JavaScript. Take a look at the example: In PHP, the page reloads every time the customer selects a color. With AJAX, it's challenging to pass the selected value to PHP. Are there any ...

phpjavascriptajax

Struggling to get custom CSS to apply properly in Joomla 4 with Bootstrap 5 template

Having created a simple Bootstrap 5 template for my Joomla 4 website, I've been attempting to customize the navbar with CSS in my user.css file. However, it seems that the styles added in user.css are not being applied. I have verified that user.css ...

cssbootstrap-5joomla4

Passing string values to an onClick event listener in Javascript is similar to how it is done in an onclick event listener in HTML

render() { return ( <div> <div onClick={() => "FSR.launchFeedback('ax9sgJjdSncZWoES6pew6wMIyCgSXpC')" } /> </div> ); } This piece of code initially appear ...

javascripthtmlreactjs

Tips for swapping a component with another component in React.js without the need for a page refresh

class Navigation extends Component { constructor(props) { super(props); this.state = { width: window.innerWidth, } } updateWidth = () => { if (this.state.width > 700) { this.setStat ...

javascriptreactjs

Can I apply a universal babel configuration across all of my personal projects?

It becomes tedious to duplicate the same configuration file for each new project I start. ...

javascriptnpmbabeljs

Is there a possible CSS-only alternative to the calc() function that can be used as a fallback

I'm aware of a CSS backup plan for calc() in IE6-7. Also, I've come across an alternative using jQuery. But what about a CSS-only substitute for calc() specifically for IE8? Is there one available? ...

css

What could be causing the express middleware function to break only under specific conditions when the 4th argument is included?

As a newcomer to node/express, I encountered a peculiar situation. When I add a 4th "value" parameter to certain middleware functions, they fail to work while others function properly. I have come across information suggesting that adding a 4th parameter c ...

javascriptnode.jsexpressrestcrud

Is it possible to include <span> tags within an input field?

When creating a post and selecting tags, I noticed that once I choose a tag, the badge for that tag appears inside the input field. I am trying to achieve similar functionality and was wondering if anyone could provide some guidance on how to do this. Let& ...

htmlreactjs

executing a Prisma database migration with various schemas

I am currently immersed in a Prisma project where my goal is to create a node module that can be utilized by other projects. The challenge now is to ensure that the database stays synchronized with the models and the primary project, so all testing platfor ...

javascriptnode.jsdatabaseautomationprisma

What could be causing my ajax post function to malfunction when triggered by a button click event?

My attempts to send variables to a PHP file via AJAX when a button is clicked have been unsuccessful. Upon checking my PHP page, I noticed that the variables were not being received. $(document).ready(function(){ $("#qryBtn").click(function(){ ...

javascriptphpjqueryajaxformshttp-post

Establish a connection between two pre-existing tables by utilizing the Sequelize framework

I have two tables already set up (User and PaymentPlan), but they were not initially linked together. PaymentPlan.ts import { DataTypes, Model } from "sequelize"; import { sequelize } from "./DBConnections/SequelizeNewConnection"; exp ...

javascriptmysqlnode.jstypescriptsequelize.js

Safari is having trouble displaying the tab content background properly, while Chrome is not experiencing any

I am currently facing an issue with the CSS tab content on a website. The client requested to add an image in the background, which I have successfully implemented and tested on Chrome and IE. However, Safari seems to be cutting off the image. You can view ...

htmlcsstabs

Steps for passing a Javascript variable through POST method and then redirecting to a different page

I am facing an issue with sending a JavaScript variable via POST to a PHP page and displaying the new page. Despite checking the variable using Wireshark and confirming that it is sent correctly (key and value), the new page does not show anything. $(docu ...

javascriptphpjquery

combining elements in JavaScript

I have two object arrays that look like this: arr1 = [ { 'v1': 'abcde', 'pv_45': 13018, 'geolocation': '17.340291,76.842807' }] arr2 =[{ 'v1':'abcde', 'pv_50&apos ...

javascriptnode.jsobject

Troubles with CSS Child Hover, Rotation, and Clipping in Pie Chart styling

The issue I am facing is with a 3-section pie chart where all sections look virtually identical. However, the :hover effect does not trigger on the first section, but it works on the other two. Each element has an equal number of overlapping parent divs, ...

htmlcsshoverclip

Choosing jQuery elements based on multiple criteria

My attempt at a seemingly simple task is proving to be quite confusing and isn't functioning as expected... The goal is clear - upon document load using $(document).ready(), I want to target all input elements with the attribute type="text" and apply ...

javascriptjqueryasp.nethtmlcss