I possess a collection of six uniquely named images that I desire to showcase in the footer, arranged neatly side by side

In the footer, I have six images with names that are displaying in two lines instead of a single line on smaller devices. For example, "s player" is shown as "s" above "player". How can I make it responsive to fix this issue?

.footer {
    position: fixed;
    bottom: 0px;
    background-color: white;
    height: 45pt;
    width: 100%;
    padding: 2pt 8pt;
    border-top: 1pt solid #f3f3f4;
}

span {
	font-family: Segoe Script;
}

.super {
	color: #9400D3;
	text-size-adjust: inherit;
}

.duper {
	color: #4B0082;
}

.champ {
	color: #0000FF;
}

.good {
	color: #FF7F00;
}

.hero {
	color: #FF0000;
}

.king {
	color: #00BD13;
}
<div class="footer">
	<div class="row">
		<div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
			<img src="/images/abc.svg" alt="Player1">
			<div><span class="super">s</span> Player</div>
		</div>
		<div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
			<img src="/images/bcd.svg" alt="Player2">
			<div><span class="duper">d</span> Player</div>
		</div>
		<div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
			<img src="/images/cde.svg" alt="Player3">
			<div><span class="champ">c</span> Player</div>
		</div>
		<div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
			<img src="/images/def.svg" alt="Player4">
			<div><span class="good">g</span> Player</div>
		</div>
		<div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
			<img src="/images/efg.svg" alt="Player5">
			<div><span class="hero">h</span> Player</div>
		</div>
		<div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
			<img src="/images/fgh.svg" alt="Player6">
			<div><span class="king">k</span> Player</div>
		</div>
	</div>

Answer №1

There is an issue with the col-xx classes being used within the children of the row. They all need to have the same width, so it is recommended to use a single col class:

.footer {
    position: fixed;
    bottom: 0px;
    background-color: white;
    height: 45pt;
    width: 100%;
    padding: 2pt 8pt;
    border-top: 1pt solid #f3f3f4;
}

span {
  font-family: Segoe Script;
}

.super {
  color: #9400D3;
  text-size-adjust: inherit;
}

.duper {
  color: #4B0082;
}

.champ {
  color: #0000FF;
}

good {
  color: #FF7F00;
}

.hero {
  color: #FF0000;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="footer">
        <div class="row">
        <div class="col">
            <img src="/images/abc.svg" alt="Player1">
            <div><span class="super">s</span> Player</div>
        </div>
        <div class="col">
            <img src="/images/bcd.svg" alt="Player2">
            <div><span class="duper">d</span> Player</div>
        </div>
        <div class="col">
            <img src="/images/cde.svg" alt="Player3">
            <div><span class="champ">c</span> Player</div>
        </div>
        <div class="col">
            <img src="/images/def.svg" alt="Player4">
            <div><span class="good">g</span> Player</div>
        </div>
        <div class="col">
            <img src="/images/efg.svg" alt="Player5">
            <div><span class="hero">h</span> Player</div>
        </div>
        <div class="col">
            <img src="/images/fgh.svg" alt="Player6">
            <div><span class="king">k</span> Player</div>
        </div>
        </div>

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

Choosing the initial hyperlink provided by a search engine like Google

While examining the google search website, I can easily locate my desired href by searching for //div[@class="r"]/a/@href using the finder tool. However, when I attempt to access it with scrapy using response.xpath('//div[@class="r"]/a/@href'), I ...

Center input boxes in an HTML form

My form is currently set up to collect card details from users. Right now, it looks like this: card number:[..........] CVV code:[....] Name as appears on card:[..........] (Imagine the square brackets are input boxes and there are no dots inside.) ...

Embedding a thread in an HTML document (Difficult task)

I'm currently working on a method to achieve the following task: Embedding a specific string (such as "TEST") into the content of an HTML page, after every certain number of words (let's say 10). The challenge here is ensuring that the word count ...

Is it possible to adjust the spacing between items within a div to a precise measurement?

It may seem like a simple task, but I'm unsure of the best approach. In my header, I have 4 links along with a logo positioned to the left. All of these links are contained within a div called main-header-right. Is there a way to add spacing between t ...

deactivate the struts anchor link once the request is sent to the action

To prevent users from clicking the anchor link multiple times while a request is being processed on the server side, I need to disable the anchor tag after sending the action and wait for the response. Additionally, there is an onclick event in my anchor t ...

Tips on showcasing content in Bootstrap's two-column layout with multiple rows featuring titles and labels

I am looking to create a form with two columns, multiple rows, and some grouped rows with headers using Bootstrap. However, I am facing issues where the columns get shrunk and misaligned during Zoom-in and Zoom-out. For example, when I zoom out to 200%, t ...

The PNG image keeps getting cropped

The bottom of a PNG image is being cropped off. View the picture illustrating the issue .loadMoreBtn-label { background-image: url(picture); background-repeat: no-repeat; padding-left: 30px; background-size: 23px 23px; background-posit ...

Creating a bullet list from a dynamically parsed object: step-by-step guide

Here is my JSON string foo_json_string: [{"foo_name":"foo_value"},{"foo_name1":"foo_value1"}] I am trying to parse it and display it as an HTML list. This is the method I attempted: <ul> <li v-for=" ...

Unable to retrieve $wpdb, returning as null

In my development process, I am working on a basic plugin using the Wordpress Plugin Boilerplate. I have implemented AJAX to create an action triggered by a button press to remove an item from a custom database table I have set up. The AJAX function, butto ...

Clicking on a dynamically generated link will not result in the file being downloaded

I have a list of document names and IDs retrieved from a database, displayed in an unordered list like this: <ul id="list"> <li onmouseover="onHover(docNumber)"> <a herf="#" id="docNumber">DocName</a> </li> </ ...

Finding the identifier of a dynamically generated text input using PHP

I am looking to create a page similar to this On this page, users can add multiple entries for date, site, start time, end time, and hours amount by clicking the + button, and remove entries using the - button. How can I retrieve the input values in PHP? ...

Discover the secret to displaying slider image titles as captivating captions in a Bootstrap 4 slider

I have implemented the understrap theme () in combination with Bootstrap for Wordpress. My goal is to display captions on the slider images. According to the Bootstrap 4 documentation, I understand that I need to include the following code: <div class= ...

iOS users may find that when a web page loads, it is often already scrolled halfway down

Encountering a problem with a long-scroll website that I'm currently developing. Whenever I access the page on my iPhone, the initial scroll position is consistently halfway down or near the bottom of the page. I've attempted to troubleshoot by d ...

Extend the div container upwards while keeping the baseline intact

When hovering over a particular div, a child div expands from the bottom to reveal its hidden contents. However, there is an issue where the parent div seems to shrink slightly from the bottom, causing elements below it to shift upward. For a visual demon ...

Solving Issues with Image Rotation and Positioning

I am encountering difficulties when trying to reposition an image that has been previously rotated using the transform rotate property. Specifically, after rotating the image, the top and left attributes do not update accordingly, resulting in the image a ...

How can I customize the styling of Autocomplete chips in MUI ReactJS?

Trying to customize the color of the MUI Autocomplete component based on specific conditions, but struggling to find a solution. Any ideas? https://i.stack.imgur.com/50Ppk.png ...

Issues with Carousel Plugin Functionality

**Hey everyone, I could really use some help. As a beginner coder, please forgive any errors in my code. I am currently working on a webpage where I need to incorporate a carousel plugin within a panel body to display the latest photos. The code provided ...

Implementing a Class Addition Functionality Upon Button Click in AngularJS

I have a form that initially has disabled fields. Users can only view the information unless they click the edit button, which will enable the fields with a new style (such as a green border). I want to add a class to these fields that I can customize in m ...

ways to display two decimal places in JavaScript

Currently, I am utilizing JSP for the view. Additionally, I am implementing angularjs and javascript. Within a text box, there is a specific value labeled 12.542001. The ng-model should maintain this value exactly, but when displaying it in the text box, ...

What is the best way to retrieve a GWT textbox value using Selenium WebDriver?

I'm currently testing my GWT application with selenium, and the HTML generated by GWT Textbox appears like this: <input type="text" class="gwt-TextBox" > Even though there's no value visible in the code above, I can see text in the UI. Is ...