When viewing my website on a larger screen, my list items are floating to the left. However, on an extra small screen, the list items are stacking on top of each other. Is there a way

Question

When viewing my website on a larger screen, my list items are floating to the left. However, on an extra small screen, the list items are stacking on top of each other. Is there a way

Creating a navbar with two li tags - one for language and another for currency. However, when the screen size is extra small, the li tags do not float left as intended, instead they stack on top of each other. How can this issue be resolved?

Additionally, the collapse button is not appearing in the correct position. Any suggestions on how to fix this?

Attempts have been made using the float-xs-left class and CSS media queries, but to no avail.

The goal is to have the "EN" and "USD" options float left on extra small screens, and make the search and total amount sections visually appealing.

html css bootstrap-4

Answer 1

Answer №1

To achieve your desired layout, you can utilize the CSS property display: flex on the parent element that contains the li tags, such as a ul element, along with flex-wrap: nowrap. Below is a sample code snippet that may help maintain the layout on smaller screens:

nav {
  width: 100%;
}

ul {
  width: 100%;
  list-style: none;
  padding: .5em;
  display: flex;
  flex-wrap: nowrap;
  background: slategrey;
}

li {
  margin: .5em;
  padding: 1em;
  background: lightblue;
}
<nav>
  <ul>
    <li>Language: French</li>
    <li>Currency: Euros €</li>
  </ul>
<nav>

Answer 2

To achieve your desired layout, you can utilize the CSS property display: flex on the parent element that contains the li tags, such as a ul element, along with flex-wrap: nowrap. Below is a sample code snippet that may help maintain the layout on smaller screens:

nav {
  width: 100%;
}

ul {
  width: 100%;
  list-style: none;
  padding: .5em;
  display: flex;
  flex-wrap: nowrap;
  background: slategrey;
}

li {
  margin: .5em;
  padding: 1em;
  background: lightblue;
}
<nav>
  <ul>
    <li>Language: French</li>
    <li>Currency: Euros €</li>
  </ul>
<nav>

When viewing my website on a larger screen, my list items are floating to the left. However, on an extra small screen, the list items are stacking on top of each other. Is there a way

Answer №1

Similar questions

Centered on the screen are the input field and corresponding label

Utilizing flex-box for smooth transitions in React Router with react-tranisition-group

Interactive carousel featuring responsive image zoom effect on hover

Is there a way to conceal the scrollbar while still permitting scrolling?

Alignment issues with menus

I'm looking to create a Triangle shape with CSS, any tips on how to achieve

Code functioning correctly in Chrome but encountering issues in Firefox

Creating a repeating sequence in HTML: A step-by-step guide

What causes top margins to collapse while bottom margins remain intact?

Unable to send email through Ajax/PHP contact form

Place a div at the bottom of a flexbox while adding some padding around it

Adjusting the size of an element in Angular JS as a textarea expands

Adjustment of Facebook button positioning in floating bar on Firefox

Utilizing CSS attr() for setting the width dimension

When attempting to click on the dropdown in Bootstrap, there is no content displayed

Troubleshooting HTML Output Display Issues

The media query will only impact elements and classes within the index.html file, and will not apply to any other

On what occasion is a DOM element considered "prepared"?

Creating links to external websites in PHP files

Is there a way to achieve this specific function using div elements instead of relying on tables, rows, and cells?