Adjust the width of the list items based on the specified condition

Question

Adjust the width of the list items based on the specified condition

I need assistance with adjusting the width of items in a list. The list includes:

<ul>
    <li>One</li>
    <li>One-One</li>
    <li>Two</li>
    <li>Two-Two</li>
</ul>

The display should be dynamic, switching between two columns and one column. For example:

Two Column Scenario

One | One-One

Two | Two-Two

One Column Scenario

One

Two

I am using AngularJS with HTML5 and CSS3. Any guidance on how to adjust the width according to the scenario would be greatly appreciated.

Thank you for your help in advance.

angularjs html css

Answer 1

Answer №1

Here is a solution that utilizes the display:flex property and @media queries. See the example below, and try resizing the output window to see it in action.

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
li {
  width: 50%;
}
@media (max-width: 40em) {
  li {
    width: 100%;
  }
  li:nth-child(even) {
    display: none;
  }
}

<ul>
  <li>One</li>
  <li>One-One</li>
  <li>Two</li>
  <li>Two-Two</li>
</ul>

Answer 2

Here is a solution that utilizes the display:flex property and @media queries. See the example below, and try resizing the output window to see it in action.

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
li {
  width: 50%;
}
@media (max-width: 40em) {
  li {
    width: 100%;
  }
  li:nth-child(even) {
    display: none;
  }
}

<ul>
  <li>One</li>
  <li>One-One</li>
  <li>Two</li>
  <li>Two-Two</li>
</ul>

Adjust the width of the list items based on the specified condition

Answer №1

Similar questions

Is it possible to open a new tab window using a radio button?

I'm curious about the method used to create this body fadeIn effect

"Enhancing the aesthetics: Stylish blue borders around Bootstrap

Disappearance of CSS borders when using jQuery scroll function

Creating a design where the divs on the sides utilize all the available space using only CSS and HTML

JavaScript and HTTP Post parameters: Consider using optional additional parameters

Modify a website link using Javascript by detecting two separate button clicks

Is there a way to use flexbox in a grid to center only a specific tab from MUI?

Displaying varied information based on JSON feedback using AngularJS

Assigning a unique identifier to a button that will vary depending on the selected radio input

Preventing users from clicking on links unless they double click by using CSS rotation

Tips for maintaining the cleanliness of PHP-generated HTML output in the 'View Source' option

Tips for managing variations in the naming conventions of JSON fields in request bodies when transferring data from JavaScript to Python using Django REST framework (DRF)

Rotating Cursor during AJAX loading process

What could be the reason my Angular interceptor isn't minified correctly?

Trouble with post synchronization in Angular-Fullstack app following update

Several pictures are not displaying in the viewpage

React snap scrolling feature is not working as intended

What is the best way to capture ng-keypress/ $event when the user clicks outside of a div?

When an HTML input button within a table fails to trigger any jQuery function upon being clicked