Html Question posted in
Some basic documentation can be found here.

Html – How do i extend the coloured box to the edges?

.output-container {
            background: #333;
            color: #fff;
            padding: 1rem 1;
            width: 100%;
            top: 0;
            z-index: 1000;
            text-align: center;
        }

Snip of the affected segment by the code

The class is just added into the ; however, I want the grey section behind the text to extend to the edges of the screen, but I can’t just increase the value of width as the text and box are connected to one another, so doing that increases how far right the text goes.

I tried increasing the value of width in the class; however, this just resulted in both the text and background being extended over to the right leaving, the text displayed incorrectly, and the left side of the grey background unmoved.

Tags:

3

Answers


  1. 0

    Try adjusting margin-left and margin-right values.

    Login or Signup to reply.
  2. 0

    if you want to set the container to max screen resolution, you have to think about the end user in this regard because what their settings may be(and probably are) different. 1920×1080 is the most common resolution. so put in an auto adjust fix also to accomodate the max-width with the container/flexbox. Also, it would help if you included the container html example and any other pertinent information. If you just want to resize the width of the element then designate a value for it and also an auto adjust fix for different users.

    reference: https://developer.mozilla.org/en-US/docs/Web/CSS/width#accessibility_concerns

    -also you are using z-index, so are you using flexbox as well?

    I just added a width parameter to resize the width as you have asked. hope this helps.

    **edit- looks like this was answered in another post. says the answer was:

    "You can use the :before pseudo element with absolute positioning and negative z-index to extend the background color of a contained div the entire way to the edge of the page."

    however, i’m not sure if the pseudo element is needed here. depends on your own markup. hope this helps!

            
.output-container  {
    background: #333;
    color: #fff;
    padding: 1rem 1;
    width: 1920px;
    position: absolute;
    z-index: -1;
    top: 0;
    text-align: center;
}
    Login or Signup to reply.
  3. 0 
    /* This is the container for the grey background */
.output-container {
    background: #333;
    color: #fff;
    width: 100%; /* Extend background to the full width of the screen */
    padding: 1rem 0; /* Adjust padding to fit the design */
    z-index: 1000;
}

/* This is the inner container for the text */
.output-container .inner-container {
    max-width: 1200px; /* Set a maximum width for the text */
    margin: 0 auto; /* Center the text container */
    padding: 0 1rem; /* Add padding to the sides for spacing */
    text-align: center;
}
    <div class="output-container">
    <div class="inner-container">
        <p>Personalised Sessions</p>
        <p>Each one-hour session will be conducted at Simply Gym Cheltenham and designed specifically to meet your individual goals. We'll progress at a pace that suits you, with an aim to push a little harder whenever possible!</p>
        <p>Monitoring Progress</p>
        <p>We'll regularly review your sessions, overall progress, and well-being to make necessary adjustments for improvement. Additionally, you can track your body weight using advanced smart scales.</p>
        <p>Exclusive Mobile App</p>
        <p>Gain 24/7 access to my personal training app, where you can log workouts, monitor meals, upload progress photos, and schedule sessions at your convenience.</p>
    </div>
</div>

    Use the width: 100%; property to make the grey background span the entire width of the screen and use max-width and margin: 0 auto; to limit the width of the text container and center it

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search