Achieving optimal body alignment on various devices

Is it possible to center the body content for all screen sizes?

The white background portion should also be centered

Check out this link for more information.

Click here to see the result.

Code snippet provided below:

<body class="home">

    <div id="redColor">
        <header style="background-color: white; width: 1224px; margin-left: 339px;">
            <div class="inner clearfix"><div class="logo">
              <a href="">          
                  <img alt="Splitwise" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo.png">
              </a>
            </div>

        </header>
        <div id="banner" class="clearfix" style="border-bottom: 5px solid #C3C3C3; width: 1223px;">
            <div class="bx-wrapper" style="width:1227px; position:relative; margin-top: 0px;">
                <div class="bx-window" style="position:relative; overflow:hidden; width:1227px;">
                    <ul id="slider1" style="width: 999999px; position: relative; left: -1227px;">
                        <li style="width: 1227px; float: left; list-style: none;" class="pager">
                                <a href=""><img src="http://www.defie.co/designerImages/frontpage_rotate1.png" alt="banner 1" border="0"></a>
                            </li>
                            <li style="width: 1227px; float: left; list-style: none;" class="pager">
                                <a href=""><img src="http://www.defie.co/designerImages/frontpage_rotate2.png" alt="banner 2" border="0"></a>
                            </li>
                            <li style="width: 1227px; float: left; list-style: none;" class="pager">
                                <a href=""><img src="http://www.defie.co/designerImages/frontpage_rotate3.png" alt="banner 3" border="0"></a>
                            </li>
                    </ul>
                </div>
            </div>
        </div>
        <section id="main" style="background-color: #646464; padding: 0px;">
            <div class="inner clearfix" style="background-color: white; width: 1223px;">
                <span style="color: #06546a; font-weight: bold; font-size: 14px; background-color: white;">Defie Cloud Buisness Solution offers features and functionality for business - today and tomorrow</span>
                <div id="primary">
                    <section class="primary">
                        <ul style="width: 800px;">
                            <li style="padding-bottom: 5px; list-style: none; font-size: 13px;">
                                <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                                    <span style="color: red;">Accounting and Finance:</span> Sales and Customer Management
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; font-size: 13px;">
                                <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                                    <span style="color: red;">Buisness Operation Package:</span> Purchasing and Vendor Management, Inventory Management, Build of Materials, Real-Time Production, Product Life Cycle, QA Management
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; font-size: 13px;">
                                <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png"><span style="color: red;">Customer Relationship Management</span>
                            </li>
                            <li style="padding-bottom: 5px; list-style: none; font-size: 13px;">
                                <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                                <span style="color: red;">Cloud File and Document Apps:</span> Store, Manage, Share, Access and Modify anytime, anywhere on any devices
                            </li>
                            <li style="padding-bottom: 5px; list-style: none;">
                                <img alt="squareList" style="margin-right: 10px; font-size: 13px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
                                <span style="color: red;">Cloud Buisness Management:</span> From Front to Back Office, z from Hardware to Software, from Desktops to Servers Solution and Support
                            </li>
                        </ul>
                    </section>
                </div>

            </div>
        </section>
        <ul id="eM" style="width: 1228px; margin-left: 80px; background-color:#646464;">
            <li id="eMli"><a id="eMlia" href="#home">Product</a></li>
            <li id="eMli"><a id="eMlia" href="#news">Solutions</a></li>
            <li id="eMli"><a id="eMlia" href="#contact">Solutions</a></li>
            <li id="eMli"><a id="eMlia" href="#about">Partners</a></li>
            <li id="eMli"><a id="eMlia" href="#news">About</a></li>
            <li id="eMli"><a id="eMlia" href="#contact">Home</a></li>
            <li id="eMli"><a id="eMlia" href="#about">Login</a></li>
        </ul>
    </div>


</body>
javascriptjqueryhtmlcss

Answer №1

One option is to utilize percentages rather than pixels for sizing. Alternatively, you may consider implementing Responsive Bootstrap, which excels in this particular area.

Answer №2

I am attempting to achieve a centered body layout that is responsive across various screen sizes.

Due to the varying resolutions of different devices, it is advisable to avoid using fixed pixel values and instead opt for percentages. This will allow the content to adapt to the available width of each device's screen.

Answer №3

Try using the following CSS code:

.main-content{
    width: 90%; //Set a width to ensure center alignment
    margin: 0 auto; //Center the content on the page
    overflow-x: hidden;
}

To optimize for smaller screens, consider implementing CSS media queries.

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

When attempting to utilize the date picker feature within the innerHTML, the functionality of the date picker seems to be ineffective

Code snippet to create date picker inputs: var td5 = document.createElement("TD") var strHtml5 = "<From><INPUT Id=\"one\" CLASS=\"datepicker\" type=\"Text\" readonly=\"true\">"; td5.innerHTML = strHtml5. ...

jqueryhtml

Trouble arises when implementing MultiLineString functionality within LeafletGIS

After receiving a response from the server, I found that I needed to restructure it to fit the GeoJSON standard in order to use it for marker animation in Leaflet. The coordinates also needed to be flipped, as Leaflet uses lat, lng while my data was in lng ...

javascriptarraysleafletgeojsonmultilinestring

Grouping an array of dynamic objects by a property value in react js / javascript: A step-by-step guide

There is an object in the following format: [{"genericName":"genesName test","genericId":3,"code":"generics"},{"genericName":"genesName fhfghsd","genericId":8,"code": ...

javascriptarraysjsonreactjsobject

JavaScript truthy values referring to numbers

According to the rules outlined below: Falsy: false 0 (zero) '' or "" (empty string) null undefinded NaN (e.g. the result of 1/0) Truthy: Anything else I'm puzzled as to why, in the tests that follow, only the number 1 is considered "tr ...

javascriptequality

Learn how to pass data from the client to the server with MVC Ajax techniques

As a beginner in Ajax, I need guidance on how to bind values from .cshtml to .cs files. I am working with Mvc and using Jquery Ajax. <script> $(document).ready(function () { $('#BtnSubmit').click(function () { ...

jqueryajaxasp.net-mvc

Terminate the connection with nginx abruptly

Is there a way for nginx to immediately close the TCP connection once the request has been completed? ...

phpjavascriptnginx

Tips for transmitting dropdown selections to a different PHP form using jQuery

After spending a considerable amount of time searching for answers online, I realized that I need some help. Despite finding helpful articles and resources on jQuery, I am still struggling to understand certain concepts. As a beginner in this field, I am w ...

phpjqueryhtmlformspost

Can the background color of a webpage be altered depending on the time of day?

https://jsfiddle.net/8x7p682z/ function initialize() { function setThemeForTimeOfDay() { const body = document.querySelector('body'); const hours = new Date().getHours(); if (9 <= hours && hours <= 12) body.sty ...

javascripthtmlcssbootstrap-4

Weird occurrences observed when JSON wraps my objects

I am sending the following request to my server: $.ajax({ url: url, data: JSON.stringify({ SecretKey: e.Code, CommentId: e.Id, Direction: direction, VoteType:1}), type: "POST", contentType: "application/json;charset=utf-8", }); After the ...

jqueryjson

What is the best way to locate the final text node within the <p> element?

Looking at the code below, my goal is to identify and retrieve the text node that serves as the last child element. <p class="western" style="margin-bottom: 0.14in"> <font color="#000000"> <font face="Arial, serif"> <font ...

javascriptjqueryhtmlcss

How can I retrieve data from MongoDB using the default data type?

Currently, I am in the process of setting up a new server with Node.js connecting to MongoDB using Mongoose. However, I have encountered an issue where when I use model.find(), it returns data but not in the default JSON type expected from MongoDB. User.f ...

javascriptnode.jsjsonmongodbmongoose

Are there CSS styles that target specific elements?

My goal is to design a unique and custom theme for blender.stackexchange. However, I am facing an issue where the rules I implement only affect certain tags when viewed in FF 29.0.1 Despite all tag elements having the same classes, parent elements, etc., ...

cssstylish

Whenever I attempt to start my ReactJS project using the command line with `npm run it`, I keep encountering an error

Encountered an issue with the webpack-dev-server script while working on my project. Ensure that your node.js and npm versions are up to date. If they are, the problem might lie within the reactjs package rather than npm itself. Kindly inform the author ab ...

javascriptnode.jsreactjs

Allocation failure encountered while using Express.js with MongoDB

Today, I encountered the same error message in the console twice, and the only solution was to restart the backend. My backend is built using Node/expressjs, and the frontend is developed with reactjs. The backend serves two websites - one for admin and on ...

javascriptnode.jsdatabasemongodbexpress

SMTPConnection._formatError experienced a connection timeout in Nodemailer

Our email server configuration using Nodemailer SMTP settings looked like this: host: example.host port: 25 pool: true maxConnections: 2 authMethod: 'PLAIN' auth: user: 'username' pass: 'pass' We encou ...

javascriptnode.jsamazon-web-servicesvue.jsnodemailer

jQuery is currently displaying the value stored in the variable in a phrased format

Having trouble with the initial phase of a major project. I am attempting to showcase the JSON output received from the URL below. It displays the data perfectly when I directly enter the URL into a web browser. However, when I assign the URL to a variable ...

javascriptajaxjsonjquery

@media doesn't seem to be functioning properly when the screen width is below

I've been working on making my website fully responsive, but I've run into an issue where it won't recognize anything below 980px in width. Here is the CSS code I'm using: @media screen and (max-width:1029px){ h1{ font-size ...

cssresponsive-designmedia-queries

The email input field is not registering the value in the HTML form

There seems to be an issue with the email field in my form. When selecting 'Headteacher' from the drop-down menu, the email input works correctly. However, when choosing 'Primary school teacher', despite entering the details as expected ...

javascripthtml

What could be the reason why the Google Maps API fails to load on Firefox?

I am currently utilizing the v3 version of Google Maps API. While my map functions perfectly in Safari and Chrome, I encountered an issue in Firefox where I received the error message "google.maps.Map is not a constructor." When inspecting 'google.ma ...

javascriptangularjsgoogle-mapsfirefoxgoogle-maps-api-3

How can I dynamically populate a multiple select box with data from a PHP query and store it in a multidimensional array using jQuery?

I apologize for any language barriers as English is not my first language. My query is as follows, I am looking to implement three multiple select boxes on a single page. How can I retrieve query data before it is executed in PHP? Each loop result will be ...

javascriptphpjqueryhtmlarrays