I am facing an issue where the text within my div element is not displaying as expected

My carousel is designed like this:

I am having trouble displaying my labels correctly.

This is an example of how I create one of my boxes: 

<div class="tl-box-wrapper">
    <div class="tl-box">
        <div class="tl-top"> <i class="fa fa-circle yellow"></i>

        </div>
        <div class="tl-bot"> <i class="fa fa-circle yellow"></i>

        </div>
        <div class="tl-right">Yellow</div>
    </div>
</div>

As you can see, I define my label here:

<div class="tl-right">Yellow</div>

I'm unsure why Yellow isn't showing.

Can anyone point out what I might have missed? My complete code can be found in this Fiddle.

jqueryhtmlcss

Answer №1

To customize your CSS, you can make the following changes:

.tl-right {
    width:80%;
    height:100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    // ADD THIS
    font-size:20pt;


}

Check out the JSFiddle I created for reference.

The code in .mp-carousel #mp-carousel-overflow has a font-size of 0pt, which essentially makes the font invisible.

Answer №2

The reason why your text is not showing up could be due to 

.mp-carousel #mp-carousel-overflow
overriding the font size and setting it to 0. To resolve this issue, you can try adding font-size:14px to the .tl-right element.

You can also check out an example on how to fix this at https://jsfiddle.net/mxwjtjxw/10/

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

Creating unique identifiers in Knockout.js based on text bindings

I am trying to achieve something similar to the code snippet below: <!-- ko foreach: subTopics --> <div id='subtopic-name-here'> <!-- /ko --> Specifically, I want the ID of my div to be set as the name of the corresponding ...

javascriptjqueryknockout.js

Exploring the functionality of JSON within the jQuery each method

I'm currently struggling with my JavaScript skills and attempting to piece this project together using various tutorials. However, I can't seem to identify why it's not functioning properly. Could someone guide me on how to properly pass an ...

javascriptjqueryjson

The resizeStop event in jqgrid does not trigger as expected

What could be the reason that resizeStop is not being triggered when I resize a jqgrid table? This is the function I am using: resizeStop: function() { alert("test"); } No JavaScript errors are showing up. ...

jqueryjqgrid

The image selection triggers the appearance of an icon

In my current project, I am working on implementing an icon that appears when selecting an image. The icon is currently positioned next to the beige image, but I am facing difficulties in making it disappear when no image is selected. Below are some image ...

javascriptjqueryhtmlcssonclick

Using JQuery within Angular 4 is a valuable tool for enhancing the functionality

As a newcomer to Angular, I am experimenting with using jQuery alongside Angular 4. In my search for information, I stumbled upon this question on Stack Overflow. Inside the question, there was an example provided that can be found here. However, when att ...

javascriptjqueryangular

Unable to retrieve file with jQuery plugin

My main goals are twofold: first, to hide the URL when a mouse hovers over it successfully; and second, to enable file download on click of an <a> tag. The current issue I am facing is that an error appears when I attempt to click on the <a> t ...

jquery

Accessing data returned from JSON in JQuery beyond the code block required

Is there a way to access returned JSON data outside of the JQuery getJSON method? For example: var price = ""; $.getJSON("../JSONDeliveryPrice", null, function (data) { price = eval(data.price); }); console.log(price); Unfortunately, this code does not ...

javascriptjqueryjsongetjson

Display open time slots in increments of 15 minutes on Fullcalendar

Currently, I am utilizing the fullcalendar plugin with the 'agendaweek' view. My goal is to showcase the available time slots as clickable and highlight the busy ones with a red background. Handling the highlighting of busy slots is not an issue ...

javascriptjquerycalendarfullcalendar

Having trouble with getting the background image URL to work in Django CSS?

Hey there, I'm having an issue with my header-task class. The background-image doesn't seem to be showing up, even though when I click the URL in Visual Studio Code, the image displays. Can anyone help me figure out what's going wrong with m ...

cssdjango

Having trouble with sending $ajax via jQuery to C# code behind and it's not working as expected

I am encountering an unusual issue when using jQuery and AJAX to post to C#. 1) The main page is not recognizing the method I am requesting through jQuery. To address this problem, I added an if statement in the page load function. If a specific item is ...

c#jqueryasp.netajax

How can the ID of a table row be retrieved if it is selected?

In my datatable, I have a list of Cars where each row contains a Car ID. A checkbox column has been added to the first cell in the table - when checked, the row is highlighted to show the user their selection. The goal is to retrieve the IDs of all selecte ...

javascriptjqueryhtml

Is it a good idea to show a loading image for slow php/mysql results?

I need some help with my website that is powered by php/MySQL for querying and displaying results. The database has grown to over 40,000 records, causing the query to slow down. I am looking for an efficient way to show a loading image while the page loads ...

phpjquerymysqlajax

Adjust speed on various HTML5 video players

I'm looking to slow down all the HTML5 video players on my page to 0.5x speed. Currently, I have a JavaScript snippet that only affects one video player at a time. <script type="text/javascript"> /* play video twice as fast */ document.quer ...

javascripthtmlvideohtml5-videoplayback

Retrieving video tag source dimensions using Angular 2

Currently, I am in the process of constructing a video component and finding a way to obtain the dimensions of the source video (either the source file or the container) so that I can pass it to another component. I have incorporated the following code: / ...

javascripthtmlangular

Executing a task once all asynchronous Ajax requests have completed while utilizing the async:false setting

I have a list of YouTube channel names: var channels = ["MyHarto", "vlogbrothers", "pbsideachannel"]; What I want to do is go through each channel, make a request to the Youtube Data API for their subscriber count, and then add up all the subscribers. How ...

jqueryajaxasynchronous

Receiving an empty response when utilizing Ajax to fetch a token from an external website

I currently have two websites in operation. One of the sites has a token, while the other is designed to allow a user to utilize this token for certain actions. Upon visiting the first site which contains the token, mySite.local/services/session/token I ca ...

ajaxjqueryresttoken

Creating a circular image in a responsive navigation bar

Currently, I have a chat navigation bar with divs representing different users, each displaying a photo of the user. My goal is to have these photos displayed as perfect circles. To achieve this, I am using padding-bottom and width properties. However, I a ...

javascripthtmlcss

Unable to divide the JavaScript AJAX outcome into separate parts

Working with JavaScript, I have received the following object from an Ajax response: {"readyState":4,"responseText":"\r\nsuccess","status":200,"statusText":"OK"} Within my code block, I am attempting to extract the responseText from this object ...

javascriptjqueryajax

Adding a list without a specific order into a paragraph with the help of jQuery

Working on a client-side class, I am in the process of changing an XHR request and getElementById function to a jQuery ajax request along with jQuery document manipulation. The task at hand is to display descriptions of items available from "Rob's Roc ...

javascriptjqueryajaxxml

JavaScript slice() method displaying the wrong number of cards when clicked

In my code, I have a section called .registryShowcase. This section is designed to display logos and initially shows 8 of them. Upon clicking a button, it should load the next set of 8 logos until there are no more left to load (at which point the button ...

javascripthtmljquerycss