Equally distributing the space while adjusting the size of the browser window

When adjusting the size of the browser window, I noticed that the space after the element is reduced. I would like to decrease the space equally on both the left and right sides, similar to how it is done on Facebook.

Below is the code I have:

CSS:

body{
     margin-left:10%;
     margin-right:10%;
}

HTML:

<body>
Some content
.
.
.
.
</body>

Initially, I considered setting a min-width for the body element. However, this could cause issues on computers with smaller screens. Moreover, using min-width may not be the most effective solution.

javascriptjqueryhtmlcss

Answer №1

Simply set the width of your body to 80% and use margin-left and margin-right as auto for center alignment 

   body{
      margin:0 auto;
      width:80%;
    }

tip:

Avoid styling directly on the body tag, instead style the top-level parent div in your page

For example,

<body>
<div class="container">
       all elements in the page.....
</div>
</body>

CSS:

.container{
          margin:0 auto;
          width:80%;
        }

Answer №3

Why is there an issue with

width: 50em;
max-width: 95%;
margin: 0 auto;

This method is often recommended online for creating a centered wrapper that adjusts in size along with the browser window, maintaining equal spacing on both sides...

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

Avoiding page refresh while utilizing the ng5-slider component in Angular

I am currently working with an ng5-slider that has a customizable range from 0 to 1000. However, I have encountered an issue when adjusting the slider at the bottom of the page - it refreshes and automatically takes me back to the top of the page. I would ...

javascriptangular

When using child_process to run a Python script in Node.js, a promise may not resolve properly if the process exits before all

Currently, I am facing an issue while trying to execute sublist3r within a node app. The script runs successfully but only displays the banner before abruptly exiting after about 5 seconds. Typically, the script should interact with the web and take approx ...

javascriptpythonnode.jses6-promisechild-process

What could be causing the JSON.parse() function to fail in my program?

Currently utilizing Django and attempting to fetch data directly using javascript. Below are the code snippets. Within the idx_map.html, the JS section appears as follows: var act = '{{ activities_json }}'; document.getElementById("json") ...

javascriptpythonjsondjango

Retrieve a specific choice from a radio button and store it in a MySQL database

I need assistance with extracting the value from a selected radio button and inserting it into MySQL database. Although I have tried using isset(), I am facing issues when trying to retrieve the chosen radio button. Could someone please lend a hand? < ...

phphtmlmysqlforms

What is the best way to create a hover effect exclusively for the hamburger icon, and not for the close button

I am facing an issue with the code snippet below: .btn-menu:hover .btn-menu__bars::before{ transform: translateY(-0.5875rem); } .btn-menu:hover .btn-menu__bars::after{ transform: translateY(0.5875rem); } Is there a way to make this hover effect only a ...

htmlcss

Encountering an Error in Laravel 8: Form Submission Issue - Uncaught TypeError Preventing Property Read

<a href="{{ url('/home') }}">Home</a> <a href="{{ route('logout') }}" onclick="event.preventDefault();document.getElementById('logout-form').submit();">Logout</a> <form ...

javascriptlaravelform-submit

Retrieving the value from a vuetify v-text-field to use in another text field

Looking to suggest a username based on the user's first and last name. The concept is that after the user fills out the first name and last name fields, the value in the username field will be a combination of their first and last names. firstName = B ...

javascriptvue.jsvuetify.js

Flexible array for varying results

I'm attempting to display a random selection from two arrays by alternating between them, with no concern for storage capacity. Unfortunately, my code is not functioning correctly and I am unsure why. var male = ["have a shot", "item 2", "item 3"]; ...

javascriptarraysvariables

Easily validate your email with this straightforward form. Completely puzzled

Today's challenge is tackling the email validation form issue. While searching for a solution, I stumbled upon an interesting code snippet: http://jsfiddle.net/jquery4u/5rPmV/ dyingOverHere(); The code seems to work flawlessly in the demo provided. ...

jqueryhtmlvalidation

What is the best way to customize the small square area found between the vertical and horizontal scrollbars?

Please take a look at the images provided below: https://i.stack.imgur.com/QVHfh.jpghttps://i.stack.imgur.com/cubd8.jpg Whenever both vertical and horizontal scrollbars intersect, it results in a square space. This phenomenon occurs not just within the b ...

htmlcss

Adjust the height of Revolution Slider on mobile devices using initialization

To see an example of the Revolution Slider, please check out the top hero section on this page. If you are looking for the initialization code, you can find it in this javascript file: function dz_rev_slider_5(){ if(dzQuery("#rev_slider_11_1" ...

javascriptjqueryjquery-pluginscarouselrevolution-slider

Use a post request with the deleteOne function to remove an entry from a MongoDB collection

Currently enrolled in a Nodejs course and diligently following the instructor's steps. I've replicated the exact code shown by the instructor, but upon execution, encountered this error message: Cannot read property 'id' of undefine ...

javascriptnode.jsmongodbexpress

What is the best way to include multiple action creators in a single listenerMiddleware in Redux Toolkit?

I am looking to store the current state in my database every time there is a change in any of its properties. I have implemented two middlewares to handle this task, each responsible for dispatching the saveTrip function. Although both middlewares are ide ...

javascriptreactjsreduxreact-reduxredux-toolkit

Iterate through an array to dynamically assign values to variables using string elements

I'm facing a challenge here. I need to generate 4 new elements with the same class but different IDs without repeating code. Unfortunately, my loop doesn't seem to be working as expected. I've spent the last 2 hours trying to crack this puz ...

javascriptarrays

Testing the throwing of errors when running Karma by utilizing sinon.spy on global functions like parseInt

I'm currently facing an issue with monitoring the usage of parseInt within my function. This is a Proof of Concept for integrating TypeScript into our company's workflow. I've tried following two different tutorials on testing Sinon, but no ...

javascripttypescriptsinonkarma-webpack

Tips on increasing the height of an element that is overflowing

When populating my timeline component with dynamically mapped data from an array, I encountered an issue where if I added more data causing the maximum height to be reached, the overflow-y element didn't display all content. Despite trying various sol ...

javascripthtmlcssreactjs

React redux - unable to load store without encountering any errors

I am currently working on a project inspired by the code example in the Learning React book, which focuses on using react redux and react router for a single page application. You can find my project here, where I have tried to replicate the example. To r ...

javascriptreactjsreduxreact-redux

Retrieve a collection of venues using the Foursquare API by utilizing either jQuery or C#

Issue: I am struggling to generate tokens and access OAuth 2 for connecting to the Foursquare API. I have searched for examples but haven't found any helpful resources. Has anyone successfully achieved this task in the past? I have been attempting wit ...

c#jqueryajaxfoursquare

What is the best way to empty a TextField in a React application?

Greetings to all! I could use some help figuring out how to clear a TextField after clicking the icon. Any suggestions would be greatly appreciated. Thanks! const [filteredLocations, setFilteredLocations] = useState(locations); const clearSearch = () =& ...

javascriptreactjsmaterial-ui

Add the element to a fresh collection of objects using an associative array

Can you help me figure out what's causing an issue when attempting to add a new element to an associative array of objects? var storeData3 = [ { 'key1' : 'value1' }, { 'key2' : 'value2' }, { 'key3&ap ...

javascriptjson