Is it possible to make the li elements within my ul list display on multiple lines to be more responsive?

My credit card icons are contained within a ul. I have used the properties background-image and display:inline for the LIs, which display nicely on larger screens.

Unfortunately, when viewed on mobile devices, the icons are cut off. My question is whether it's possible to make the icons appear on two lines on mobile or to scale down their size. I attempted using transform:scale with a max-width:474px, and while it does work, all the icons get shifted to the right. Even after trying float:left and text-align:left, there was no change in the layout.

Below is the code snippet:

.payment-methods {
  float: left;
  white-space: nowrap;
  list-style-position: outside;
  list-style-type: disc;
  vertical-align: baseline;
}

.payment-methods li {
  background-repeat: no-repeat;
  background-size: auto auto;
  display: inline;
  padding: 10px 40px;
}

.payment-methods .visa {
  background-image: url("https://via.placeholder.com/40x20");
}

.payment-methods .mastercard-card {
  background-image: url("https://via.placeholder.com/40x20")
}

.payment-methods .american-express-card {
  background-image: url("https://via.placeholder.com/40x20")
}

.payment-methods .discover-card {
  background-image: url("https://via.placeholder.com/40x20")
}

.payment-methods .paypal-card {
  background-image: url("https://via.placeholder.com/40x20")
}
<ul class="payment-methods">
  <li class="visa"></li>
  <li class="mastercard-card"></li>
  <li class="american-express-card"></li>
  <li class="discover-card"></li>
  <li class="paypal-card"></li>
</ul>

htmlcsshtml-listsresponsive

Answer №1

Consider trying out the following adjustments...

.payment-methods {
    display: -moz-flex;
    display: -o-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
}

.payment-methods li {
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    list-style: none;
    margin: 10px;
    padding: 0;
    height: 20px;
    width: 40px;
}

Learn more about flexbox techniques and explore a handy flexbox generator tool.

Answer №2

You adjusted the display of your elements to be inline and removed the directive that was preventing their parent from wrapping new lines. Removing the white-space directive allows the max-width property to function as intended.

.payment-methods {
  max-width: 200px;
  float: left;
  /*white-space: nowrap; this is the issue */
  list-style-position: outside;
  list-style-type: disc;
  vertical-align: baseline;
}

.payment-methods li {
  background-repeat: no-repeat;
  background-size: auto auto;
  display: inline;
  padding: 10px 40px;
}

.payment-methods .visa {
  background-image: url("https://via.placeholder.com/40x20");
}

.payment-methods .mastercard-card {
  background-image: url("https://via.placeholder.com/40x20")
}

.payment-methods .american-express-card {
  background-image: url("https://via.placeholder.com/40x20")
}

.payment-methods .discover-card {
  background-image: url("https://via.placeholder.com/40x20")
}

.payment-methods .paypal-card {
  background-image: url("https://via.placeholder.com/40x20")
}
<ul class="payment-methods">
  <li class="visa"></li>
  <li class="mastercard-card"></li>
  <li class="american-express-card"></li>
  <li class="discover-card"></li>
  <li class="paypal-card"></li>
</ul>

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

Tips for implementing validation in JavaScript

I'm brand new to learning Javascript. Recently, I created a template for a login page and it's working perfectly fine. However, I am struggling with setting up validation and navigation. My goal is to redirect the user to another page if their us ...

javascripthtmlauthentication

I have noticed that the share buttons on Sharethis.com only show up after I resize the viewport

After integrating share buttons from Sharethis.com, I noticed that they do not appear when the page is refreshed. However, when I resize the viewport, they suddenly show up. <!DOCTYPE html> <html lang="en"> <head> <script t ...

htmlbuttonsharebootstrap-5

How to Efficiently Organize OpenAI AI Responses Using TypeScript/JavaScript and CSS

I'm using a Next.js framework to connect to the OpenAI API, and I've integrated it seamlessly with an AI npm package. The functionality is incredible, but I've encountered an issue regarding line breaks in the responses. You can find the AI ...

javascriptcssreactjstailwind-cssopenai-api

Determine whether the child element extends beyond the boundaries of the parent element

I am currently working on determining whether a child element is visible within its parent element. To achieve this, I am comparing the width of the parent element to the position of the child element using position().left. Given that I have multiple dist ...

jquerycss

What could be causing PostgreSQL to remove HTML entities when using ts_headline()?

In the process of developing a prototype for a full-text search capability, I am working on returning the "headlines" of found documents in the search results. Here is an adapted example from the Postgres documentation: SELECT ts_headline('english&ap ...

htmlpostgresqlpostgresql-9.5

Unusual behavior observed while looping through an HTMLCollection returned by the getElementsByClassName method

After spending some time debugging, I discovered an issue with my function that changes the class of elements to modify their properties. Surprisingly, only specific elements were being affected by this change. It took me a while to troubleshoot and resolv ...

javascripthtmlgetelementsbyclassnamehtmlcollection

Form submission not functioning within a bootstrap popover

I'm having trouble saving a URL from an input field (the form is inside a Bootstrap popover) - nothing happens when I click the save button. Below is my HTML code: <div id="popover-content" class="hide"> <form name ="bform" method = "post" ...

htmldjangotwitter-bootstrap-3popover

The onClick event is not functioning properly with React's select and option elements

Looking for a way to get the option value from each region? const region = ['Africa','America','Asia','Europe','Oceania']; <div className="options"> <select> ...

javascripthtmlreactjsjsx

Using single and double quotes in combination with brackets in PHP: a guide

My struggle lies in using single and double quotes along with brackets in PHP $nestedData[] = '<a href="JavaScript:newPopup('loghistory.php?logid='.$row['user_id'].'')"> History('.$countqry.')</a>&a ...

phphtml

Is it possible to generate excel spreadsheets using a selection in Laravel?

In my system, I have implemented a radio group as a filter for my table which displays items as active, inactive, or both. Additionally, there is a button that allows users to export the table data into an Excel document. Currently, the export button downl ...

phphtmllaravellaravel-8

Hide the Modal Content using JavaScript initially, and only reveal it once the Onclick Button is activated. Upon clicking the button, the Modal should then be displayed to

While trying to complete this assignment, I initially attempted to search for JavaScript code that would work. Unfortunately, my first submission resulted in messing up the bootstrap code provided by the professors. They specifically requested us to use Ja ...

javascripthtmlcssbootstrap-4

The CSS command for displaying additional content is not functioning within table elements

I'm attempting to add a 'read more' arrow to the third column, which should expand the text in the first column when clicked. I have the following code, and it works fine outside of a table but not inside one. Where am I going wrong? I prefe ...

css

When I click on "Submit", it redirects me to the PHP page

I've followed a tutorial on creating custom PHP contact forms at this link: and made some modifications to the form for my specific requirements. However, when I click the Submit button on the form, it redirects me to the PHP page. What I actually w ...

phphtmlformsemailsubmit

Tips for positioning a background image behind page content

I have a webpage with a background image, and now I want to add content that floats over it. However, the code below is placing the content behind the image. How can this be corrected? It's important to note that I'm attempting to achieve the ef ...

htmlcss

The hover effect seems to be disabled in the third-level submenu

I need help creating a dropdown menu that shows an image when hovering over a specific item. I have checked my CSS code and HTML structure, but the image is not appearing as expected when I hover over the "Afyon White" list item. Any ideas on how to fix th ...

htmlcssdrop-down-menuhoverdropdown

Information extracted from the database without considering any line breaks

When data is stored in my MySQL database, the line breaks of the text input are preserved. However, when retrieving the data, the line breaks disappear and everything is displayed as one continuous string without any <br> tags. Any insights into why ...

phpmysqlhtml

Send the form via ajax

I am in the process of creating a unique application for my university, which is essentially a social network. One key feature I need to implement is the ability for users to add comments, which involves inserting a row into a specific database. To achieve ...

javascriptjqueryhtmlajaxforms

Tips for transferring data to index.html from Fetch API

Trying to transfer data from an API to my website has been a challenging task. The structure of my directories is as follows: project > server.js | public public > index.html | styles.css A snippet of my code in server.js shows the process: ...

htmlnode.jsreactjsexpress

Steps for Converting Unicode Characters to HTML Encoding in C++

Can you assist me with converting unicode characters like the ones below in C++? Thére Àre sôme spëcial charâcters ïn thìs têxt عربى I need to convert them to HTML encoding as shown below: Th&eacute;re &Agrave;re s&ocirc;me sp&am ...

htmlc++encoding

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

javascripthtmlcssvue.jsobject