Aligning the remaining elements once they are hidden using display: none

Note: I am implementing Flexbox in my design

When resizing the screen, I utilize "display:none" to eliminate some elements that won't fit as the layout adjusts. However, once these elements are removed, the remaining ones aren't horizontally centered within their columns anymore.

For instance (this is an illustration and not actual code):

|-------------------------------|
|       |       |       |       |
|  1 2  |  1 2  |  1 2  |  1 2  |
|-------|-------|-------|-------|

After the "2" element is hidden with "display:none", the remaining elements lose their horizontal centering:

|-------------------------------|
|       |       |       |       |
|  1    |  1    |  1    |  1    |
|-------|-------|-------|-------|

I am looking for the optimal method to maintain horizontal centering while scaling down and removing the "2" element. Any suggestions?

cssresponsive-designflexboxcentering

Answer №1

Method 1 - Flexbox Approach

In order to center elements using flexbox and maintain their alignment, you can utilize the justify-content and align-items properties.

HTML

<article id="container">
    <section class="box>
        <span class="one">1</span>
        <span class="two">2</span>
    </section>
    <section class="box>
        <span class="one">1</span>
        <span class="two">2</span>
    </section>
    <section class="box>
        <span class="one">1</span>
        <span class="two">2</span>
    </section>
 </article>

CSS

#container {
    display: flex;
    justify-content: center; /* horizontally align flex items */
    align-items: center; /* vertically align flex items */
    height: 50px;
    background-color: lightgray;
    border: 2px dashed black;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    padding: 5px;
    margin: 5px;
    font-size: 1.2em;
    border: 1px solid red;
}

@media screen and (max-width: 500px) {
    span.two { display: none; }
}

DEMO (adjust window size for effect)

Method 2 - text-align Property

Another way to center content is by applying text-align: center to the parent element.

HTML (same as above)

CSS

#container {
    display: flex;
    justify-content: center; /* horizontally align flex items */
    align-items: center; /* vertically align flex items */
    height: 50px;
    background-color: lightgray;
    border: 2px dashed black;
}

section {
    width: 50px;
    padding: 5px;
    margin: 5px;
    font-size: 1.2em;
    border: 1px solid red;
    text-align: center;
}

@media screen and (max-width: 500px) {
    span.two { display: none; }
}

DEMO

Answer №2

To achieve center alignment in flexbox, one technique is to eliminate the "2" element from the DOM using JavaScript. This action allows the remaining elements to be centered.

var targetElement = document.getElementById("element2");
targetElement.parentNode.removeChild(targetElement);

Alternatively, you can adjust the positioning of the "2" element to "position:absolute". By doing so, flexbox will no longer have control over its placement, resulting in centering the other elements without considering it.

#element2{
  display:none;
  position:absolute;
}

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

What is the method for adjusting the text color in an HTML document?

Is there a way to modify the text color of this statement: You Have Already Earned Credit For This Link? <div id=\"myform\" style=\"visibility: hidden;\"> <font size=2><b>You Have Already Earned ...

htmlcss

I need help setting up a link in HTML that redirects to the correct webpage when clicked. How can I make this happen smoothly?

<!DOCTYPE html> <html> <head> <title>______</title> <button class="btn about">About</button> <button class="btn socialmedia">Social Media</button></button> <button class ...

htmlcss

When the CSS visible property is set to false, do controls in Firefox still respond to mouse events?

Currently encountering an issue with FIREFOX. There seems to be an invisible list control above a drop-down control (html 'select'). The hidden layer is actually a pop-up that is part of another customized control. Despite its invisibility, it i ...

cssfirefoxdrop-down-menumouseeventvisibility

Leap over in a similar fashion to the provided demonstration

In my attempt to create a unique project, I have created this CodePen example. The goal is to have one ball on the circle that remains in a fixed position, while another rotating main ball must avoid touching it at all costs. Points are awarded for success ...

javascriptjqueryhtmlcss

There seems to be an infinite amount of padding between the menu bar and content space on the right side

I am having trouble aligning the menu bar and content side spaces. The issue is that the right side of the menu bar and content space doesn't have any side space. I would like to add some space to them similar to the left-hand side. Below, you'll ...

htmlcssresponsive-designfrontend

Incorporating Bootstrap content directories into ASP.NET website projects

I've been experimenting with Bootstrap for website design, but I'm facing an issue with adding files to my project. When creating a project in Visual Studio 2015 using File/New/Web Site..., I'm able to simply Copy/Paste the css, fonts, js fo ...

c#cssasp.netweb-applicationsbootstrap-4

Issue with fadeout() on absolutely positioned element loaded via AJAX in jQuery

Currently, I am utilizing AJAXify on a website project to implement page transitions and encountering some abnormal behavior with jQuery. Below is my code: HTML (I am transitioning through backgrounds using jQuery) <div id="backgrounds"> <img s ...

jquerycssajax

Dynamic Positioning in Javascript Application

When working on a javascript project, I needed to create a div element. Here is the code snippet I used: const divStyle = {left: offsetPercent + '%', 'position': 'absolute'}; <div style={divStyle}/> However, I encounte ...

javascriptcssreactjs

Fixed first column in a spacious data grid

The layout I have created can be viewed in the Fiddle http://jsfiddle.net/5LN7U/. <section class="container"> <section class="field"> <ul> <li> Question 1 </li> <li> question 2 </ ...

javascriptjqueryhtmlcss

Unable to make boxes responsive to size changes in CSS when layered over video background

I am struggling to position my boxes on top of a video background in HTML/CSS. Despite my efforts, the boxes only appear at the bottom and do not move with any CSS adjustments I make. Is there something I am missing or doing wrong in my approach? I want to ...

htmlcss

What is the best way to create a "tile-based board" for this game?

I am working on a project to create a board made up of tiles, but I am facing difficulty in filling up the entire board area. Currently, I have only managed to create 1 column of the board, as shown in the image. Can someone guide me on how to fill the ent ...

javascripthtmlcssweb

Trouble arises when attempting to make an expanding search bar with the :focus-within pseudo-class

I am looking to create a search bar similar to the one on this website: . I attempted to do so using the following code: (Here's a codepen) HTML: <div class="col-md-4 d-flex justify-content-end all-buttons"> <div class="col ...

htmlcss

Troubleshooting Problems with CSS Three-Column Layout

Struggling with aligning domain names in a 3 column setup, I have been attempting this for some time now without success. I am new to this and could use some guidance. Here is the code: TPL file <div> <p class="center">{foreach key=num it ...

htmlcsssmarty

Adjust the CSS to set the size of the element's height to a percentage of the screen

I'm curious if there's a way to set the CSS with an x (unknown) percentage amount, like height: *%;. If it's not possible, how can I make it take the size of the rest of the screen? I experimented in http://jsfiddle.net/omarjuvera/xnau2wsL/ ...

htmlcss

I am having trouble getting the (:active) pseudo-class to function properly with the menu on my WordPress theme

Purchased a theme called HelpGuru and encountering issues with the CSS of the menu. Reached out to support but they were unable to assist, directing me to a company that specializes in customizing WordPress themes instead. The link to the demo can be found ...

csswordpressmenupseudo-class

Tips for aligning a `img` element with absolute positioning within a `div` element while preserving its original aspect ratio

Here is an image along with its corresponding CSS: .containerImg { height: 420px; margin-top: 0; position: relative; width: 100%; } .img { margin: 0 auto; position: absolute; /*I cannot remove the position:absolute unfort ...

htmlcssimageaspect-ratio

Adjusting the Image Dimensions to 100% without Distorting the Size

Recently, I came across the following code: .home_post_cont { width: 228px; min-height: 331px; } .home_post_cont img { width: 228px; height: 331px; } This code allows the image to fit perfectly within its container. However, I am now looking for a diffe ...

htmlcssheight

What is the best way to populate a div with multiple other div elements?

My current project involves creating a sketchpad using jQuery for an Odin Project assignment. However, I have encountered an issue with filling the canvas (wrapper div) with pixels (pixel divs). The canvas does not populate correctly. Here is the link to m ...

javascriptjqueryhtmlcss

How can I center a Bootstrap modal vertically and make it responsive?

Is there a way to vertically center the bootstrap modal? I have been searching for a solution, but none seem to be responsive or effective. My website is using Bootstrap 3. The modal does not adjust properly on smaller screens or when the browser window i ...

javascriptjqueryhtmlcsstwitter-bootstrap

Are programmatic clicks distinguishable from manual clicks in JQuery?

Currently, I am in the process of creating selectable and draggable elements for a table. You can test the functionality by following this JsFiddle link (please try vertically selecting). Initially, the selection works well but upon trying to select for th ...

javascriptjqueryhtmlcss