Issue with wrapper functionality and page scaling

Question

Issue with wrapper functionality and page scaling

I am facing another issue. I have created a #wrapper on my page to manage the width of the content, but... It does not work properly on screens larger than 1366px.

When tested on a 1920 screen, the debugger showed that the total width of the wrapper was only 1244px (not 1920px). The same problem occurred on a 4k TV - the page appeared "scaled" to the wrapper width. It seems like the full width of the page is being controlled by the wrapper and any 'width: 100%' settings on body/sections are being ignored.

Do you have any idea where the issue might be? Setting !important on the wrapper hasn't made a difference, max/min width is not working either. Changing units to vw has not solved it. Even removing/changing meta tags did not help. And there are no other tags overriding the wrapper. The styles were cleared using SCSS Reset at the beginning. What could I possibly be doing wrong?

html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .aaa {
        width: 100%;
        height: 300px;
    }
    #wrapper {
        width: 1224px !important;
        margin: 0 auto !important;
    }

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="Stylesheet" type="text/css" href="css/style.css">
    </head>
     <body>
        <section class="aaa">
            <div id="wrapper">
                <h2>content</h2>
            </div>
        </section>
     </body>
    </html>

The desired setup should look like this:

[-margin-[-wrapper 1224px-]-margin-]

[------------------1920px-----------------]

However, on a 1920px resolution screen, it currently looks like this:

[--wrapper 1224px----]

[-1224px in debugger-]

Even with a screen resolution of 1920px

Here is a link to the troubled page: www.xileo.pl

And here is an image from a 4k screen:https://i.sstatic.net/ZH4UR.jpg

As depicted in the image from a 3840px screen, the wrapper was scaled to 3840px instead of remaining at 1224px with margins. I want the wrapper to stay at 1224px with margins.

html css

Answer 1

Answer №1

If my interpretation is correct, give this a try:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.aaa {
    width: 100%;
    height: 300px;
}
#wrapper {
    max-width: 1224px;
    margin: 0 auto;
}

If this doesn't solve the issue, share a jsfiddle link for further assistance.

*Update: I included a screenshot from a screen close to 4k resolution; however, it seems your screen may not be true 4k or there could be some scaling issues. You may need to debug this further. Everything else appears to be functioning as expected. It's possible that there is another CSS rule overriding the code you shared, so ensure that the partial code you provided is working correctly.

https://i.sstatic.net/a4bXC.jpg

Answer 2

If my interpretation is correct, give this a try:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.aaa {
    width: 100%;
    height: 300px;
}
#wrapper {
    max-width: 1224px;
    margin: 0 auto;
}

If this doesn't solve the issue, share a jsfiddle link for further assistance.

*Update: I included a screenshot from a screen close to 4k resolution; however, it seems your screen may not be true 4k or there could be some scaling issues. You may need to debug this further. Everything else appears to be functioning as expected. It's possible that there is another CSS rule overriding the code you shared, so ensure that the partial code you provided is working correctly.

https://i.sstatic.net/a4bXC.jpg

Answer 3

Answer №2

Updated: https://jsfiddle.net/8yt3fp0k/ I was able to get the CSS working, but it seems like there might be an issue with the SCSS code. It's possible that another #wrapper is defined elsewhere outside of the provided snippet.

CSS:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.aaa {
    width: 100%;
    height: 300px;
}
#wrapper {
    width: 1224px;
    margin: 0 auto;
}

Answer 4

Updated: https://jsfiddle.net/8yt3fp0k/ I was able to get the CSS working, but it seems like there might be an issue with the SCSS code. It's possible that another #wrapper is defined elsewhere outside of the provided snippet.

CSS:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.aaa {
    width: 100%;
    height: 300px;
}
#wrapper {
    width: 1224px;
    margin: 0 auto;
}

Answer 5

Answer №3

If you're looking to adjust the layout for larger screens, simply modify the width property:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    height: 400px;
}
#main-content {
    width: 1400px; 
    margin: 0 auto;
}
@media only screen and (max-device-width: 1400px) {
 #main-content {
    width: 100%;
    margin: 0 auto;
}
}

Answer 6

If you're looking to adjust the layout for larger screens, simply modify the width property:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    height: 400px;
}
#main-content {
    width: 1400px; 
    margin: 0 auto;
}
@media only screen and (max-device-width: 1400px) {
 #main-content {
    width: 100%;
    margin: 0 auto;
}
}

Answer 7

Answer №4

Updated answer following modifications to the question and insertion of a link to the original website:

The existing rule is as follows:

.index .main-page .main .main-box .about-us {
    width: 100%;
    padding-right: 370px;
}

This particular rule results in a significantly large right padding for the upper text block, thereby reducing its overall width. To have the about-us section span the entire width of the wrapper, you can remove this rule.

If you prefer the .about-us to be narrower and centered horizontally within the initial wrapper, simply adjust the rule like so:

.index .main-page .main .main-box .about-us {
    width: 1224px; /* choose any suitable value */
    position: relative;
    margin: 0 auto;
}

In addition, please keep in mind these two important points:

1.) The wrapper has a maximum width limit of 1224px and is utilized in other sections as well. Should you wish for the subsequent section (featuring four text blocks) to expand across a wider screen, make amendments to the width and max-width parameters in the wrapper rule.

2.) Multiple instances of the wrapper are being used, each associated with an ID which should ideally be unique on a single page. In order to ensure consistency, update #wrapper to

.wrapper</code in the CSS file, and alter all occurrences of <code>id = "wrapper"

attributes within your HTML elements to class = "wrapper".

Answer 8

Updated answer following modifications to the question and insertion of a link to the original website:

The existing rule is as follows:

.index .main-page .main .main-box .about-us {
    width: 100%;
    padding-right: 370px;
}

This particular rule results in a significantly large right padding for the upper text block, thereby reducing its overall width. To have the about-us section span the entire width of the wrapper, you can remove this rule.

If you prefer the .about-us to be narrower and centered horizontally within the initial wrapper, simply adjust the rule like so:

.index .main-page .main .main-box .about-us {
    width: 1224px; /* choose any suitable value */
    position: relative;
    margin: 0 auto;
}

In addition, please keep in mind these two important points:

1.) The wrapper has a maximum width limit of 1224px and is utilized in other sections as well. Should you wish for the subsequent section (featuring four text blocks) to expand across a wider screen, make amendments to the width and max-width parameters in the wrapper rule.

2.) Multiple instances of the wrapper are being used, each associated with an ID which should ideally be unique on a single page. In order to ensure consistency, update #wrapper to

.wrapper</code in the CSS file, and alter all occurrences of <code>id = "wrapper"

attributes within your HTML elements to class = "wrapper".

Issue with wrapper functionality and page scaling

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the process for detaching and attaching click animations using the on() method?

Rearrange the order of items in the fancybox gallery

Designing an accordion with the main content peeking out slightly before collapsing into place

An innovative approach to loading tabs dynamically using Materialize CSS

Utilize the input type=date value in the date function to obtain a specific format

How can I center the navbar logo and use it as a toggle for collapsing the menu?

Removing Hidden Menu Options within WordPress

How can input be fixed in place within a list inside an Ionic framework popover?

Encountering issues with CSS Modules in Next.JS app while using app/about/layout.tsx

The progress bar seems to be malfunctioning

The tab-width property in CSS allows you to specify the

What is the best way to retrieve an item if it is a sibling of a specific tag?

Insert a parameter into a click function within the identifier attribute

Is Search Highlighting Keywords Causing Issues with URL Variables?

What is the best way to make Marquee text begin at the bottom of the screen?

Struggling with Compatibility Issues Between LESS and Twitter Bootstrap

Is there a way to use jQuery to centrally align the accordion item that I have chosen?

Is there a way to create a dropdown selection for font families with vue js?

What is the syntax for implementing an if-else statement?

How to responsively position and scale a background image for a full-width div