`Align nth-child elements in the center based on varying display sizes`

How do I center the nth-child elements here? Currently, it aligns my divs in a row, which is what I want, but how can I center the elements in the middle of my page based on browser width? Right now, if I center the elements by changing left: px; it only works on my main display. When the site is visited from browsers with different display sizes, it is not centered. How can I fix this issue? Or maybe there is another approach I can take?

/* Overview bottom */

    .content-box-s {
      margin: 0 0 5px 1px;
      width: 222px;
      overflow: hidden;
      bottom: -75px;
      position: fixed;
      -webkit-transition: all 0.95s ease-in-out;
      -moz-transition: all 0.95s ease-in-out;
      -o-transition: all 0.95s ease-in-out;
      transition: all 0.95s ease-in-out;
    }

    /* CSS code continues... */
    

Answer №1

I suggest utilizing flexbox to accomplish this task effectively. Simply add position: fixed; to your #inhalt container, and the child elements can then be dynamically positioned using flexbox. You can also incorporate position: relative; with some adjustments for your hover effects.

See a working example below:

/* Overview bottom */

body {
  margin: 0px;
}

#inhalt {
  width: 100%;
  position: fixed;
  bottom: 0px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.content-box-s {
  /* CSS styles here */
}

/* Additional CSS rules go here */

Answer №2

Your HTML or CSS code is too lengthy to examine thoroughly.

  1. Eliminate the use of position:fixed in all instances of .content-box-s.
  2. Ensure that the entire layout moves by adjusting the position of the #inhalt container. This means positioning all child elements relative to #inhalt and avoiding hardcoded pixel values.
  3. Only apply fixed positioning to the #inhalt container.
  4. For guidance on centering #inhalt horizontally using flexbox, refer to this answer.

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

The issue with Grid component in Nested Single file Component

I'm currently working on creating a grid component in Vue to set up a sortable and searchable chart using Single File Component. I've also integrated vue-router into the project. Below are my two .vue files. At the moment, I can only see the sear ...

Deactivate Link Using CSS while Allowing Title to be Functional

Is there a way to enable the link in CSS while still showing the title? Take a look at my code: CSS and HTML Code: .disabledLink { pointer-events: none; opacity: 0.6; cursor: default; } <a href="www.google.com" class="disableLink" title="M ...

Each time I load the page, it displays differently depending on the browser. I'm struggling to understand the reason

Trying to figure out how to make the navigation bar close when a link is clicked and directed to a section instead of a new page. When on a large screen, I want the nav bar to remain open but automatically close when on a small screen (for example, when th ...

"Uncovering the mystery of the missing element in Jquery's open

I have developed a click-to-show feature that opens and closes a div from left to right. You can view the demo here on jsfiddle.net In the demo, you will find a green-colored div. Upon clicking this div, another div opens from left to right. An interesti ...

Solving the issue of unnecessary white space when printing from Chrome

Whenever I print from Chrome, there seems to be extra space between lines in the middle of a paragraph! Here is an image showing the difference between print emulation and print preview This excess space is always in the same position on various pages an ...

Try utilizing a variety of background hues for uib progressbars

Looking to incorporate the ui-bootstrap progressbar into my template in two different colors, background included. My initial idea was to stack two progress bars on top of each other, but it ended up looking too obvious and messy, especially in the corner ...

Looking to create an anchor tag that navigates to a specific ID on the page while accommodating a fixed header placement

In my application, the homepage's carousel displays multiple images with dynamically generated anchor tags that link to different routes. When clicking on the anchor tag, the page scrolls to the linked image but is obstructed by a fixed header. I want ...

Adding negative values to the Tailwind CSS utility plugin is a simple process that can greatly enhance

Adding Negative Values to Tailwind CSS Utility Plugin Quick Summary: I've developed a custom Tailwind utility plugin that includes numeric values. I'm looking for a way to introduce negative numbers by adding a - at the start of the class, simi ...

The absence of a datepicker in Bootstrap has become glaringly obvious

My form includes a single date input using <input type='date' class='form-control'>. When utilizing the form-control feature from Bootstrap 5, the default white color is applied to the date picker, matching the rest of the form. ...

Placing the image at the lower edge of the page

Looking to display thumbnails in a div with dimensions of 120x120, but struggling with the vertical alignment. The current image size is 120x57 and it's not aligning properly within the div, leaving too much space at the top. Here is the code snippet ...

Changing the CSS class of the Bootstrap datetime picker when selecting the year

Is there a way to change the CSS style of the Bootstrap datetime picker control so that when selecting years, the color changes from blue to red? I attempted to do this with the following code: .selectYear { background-color:red!important; } However ...

Make the background disappear when the text field is left empty and the cursor is not present (onUnfocus)

When the text field is empty and there is no cursor in the text field, I want it to be transparent and for the spell checker not working. The result should be displayed a little to the left inside a <div>. Should this be done using CSS, JavaScript, ...

Angular JS integration for optimal Bootstrap grid alignment

Recently, I have been exploring the Bootstrap framework and experimenting with grid alignment. When working with 4 columns, W3 schools recommends using the following row setup: <div class="row"> <div class="col-lg-3"> </div> ...

When scraping daily HTML tables with Selenium, I am only able to retrieve the last page

Exploring web scraping to gather data for my latest project has been quite the adventure. This is my first attempt at extracting information from websites, specifically prices that are listed on a website. The challenge I am facing is that I require this d ...

What is the reason behind why decimals don't automatically pre-fill like integers do?

Seeking help with an HTML issue - I have a field pre-filled with a decimal number, but it's not displaying the value when loaded. The field should accept both integers and decimals, but only integer values are showing up correctly. I've spent ho ...

Assign and retrieve unique identifiers for checkboxes

One of the challenges I'm facing is working with an array of ID's from a database in combination with a table layout: The ID array includes specific record identifiers, for example: Array ( [0] => Array ( [id] => 1 [code] => GHY87 [de ...

Is it possible to trigger the @click event in Vuejs when utilizing v-html to render HTML content?

Here is an interesting HTML scenario: errorText: '<a class="button" @click.prevent="enableExceedable(issue.mapping)">Enable exceedable limits</a>'; I am trying to insert this string into the following div: <div v-if="hasIssue != ...

Styling Lists: How to Create a Second Line Indent with Counters

There seems to be an issue with the second line indent when using a custom counter. When attempting to use 'list-style-type: decimal', the numbering does not display as desired, for example: ol { counter-reset: ci-counter; list-style- ...

Is it possible to apply CSS styling to all placeholders in a Sencha Touch application?

Having trouble figuring out how to style all the placeholders in my application with CSS. I've attempted a few different methods: .customField input::-webkit-input-placeholder { color: #2e4bc5; } .x-text-field input::webkit-input-placeholder{ c ...

Tips for showcasing information from an external model on your webpage without the need to reload the entire page

My goal is to dynamically show a User's name above a form field where they input their Employee # without requiring a page refresh. For instance, when they enter their # and move to the next field, I want their name to appear above based on the datab ...