Conceal the second testimonial in owl-carousel on screens smaller than 1200px

Currently, I am working with a carousel feature that displays 2 testimonials per slide. I have set it up so that when the screen size is at least 1200px, 2 testimonials are shown. However, when the screen size drops below 1200px, only one testimonial should be displayed. Unfortunately, due to a CSS issue, the second slide is still appearing on smaller screens. I attempted to solve this problem with the following code in my stylesheet:

@media screen and (max-width: 1199px) {
.owl-wrapper > li:nth-child(2) {display: none !important;}
}

Is there anyone who has encountered this issue before and knows how to fix it? You can visit the site here.

htmlcss

Answer №1

Utilizing the child selector to specifically target only direct descendant li elements of .owl-wrapper is a smart move. To broaden your reach, consider applying the same code to div elements instead.

.owl-wrapper > div:nth-child(2) {display: none;}

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

What could be causing the malfunction of the Carousel Slide feature in my code?

I have encountered an issue while trying to implement the Bootstrap code below. It seems to only display the first slide and does not progress to the next one. I am unsure of what might be causing this problem. Can anyone help me troubleshoot? <secti ...

htmlbootstrap-5

Creating a Line Chart Using an HTML Table

I am a beginner when it comes to understanding charts and MVC. Currently, I am attempting to develop a line chart to represent tabular data in MVC. Below is a snippet of the sample data that I am working with: <div class="panel-body table-responsive"&g ...

jqueryhtmlchartslinechart

What steps should be taken to create a two-column table from a given list of items?

I am trying to display a list of words in two columns, one word after another from left to right. Here is the desired table structure: <table id="wordTable"> <tr> <td>ac </td> <td>bd </td> </tr> ...

javascripthtml

Looking for a way to limit the number of characters allowed per line in a textarea using jQuery

I have the following HTML textarea: <textarea name="splitRepComments" cols="20" rows="3" ></textarea> I have implemented a maxlength restriction using jQuery with the following function: var max = 100; $('#splitRepComments').bind(" ...

javascriptjqueryhtmlcsstextarea

Tips for deactivating text input within a textarea

Is there a way to prevent users from typing in the text-area on my chat website? I only want it to display text, not allow input. Any suggestions? ...

htmlcssweb

HTML title without multiple lines

I'm currently experiencing an issue with my HTML code. Here is the snippet in question: <td title="line1 line2 line3 line4"> My concern is that I do not want the web browser to display this content in multiple lines. Instead, I am ...

htmltitle

Adjusting specific sections of a container in real-time

Fiddle: https://jsfiddle.net/1b81gv7q/ Sorry for the slightly cryptic title; I couldn't come up with a better way to phrase it. Imagine this scenario: there's a container with content that needs to be dynamically replaced. If I wanted to repla ...

javascriptjqueryhtmlcsstemplates

Is there a way to manipulate the color of this Unicode character in Edge without altering the font? (The current code functions correctly in Firefox.)

Is there a way to adjust the following code to ensure the Unicode character with HTML code ◼ prints in red in both Firefox and Edge browsers? Currently, it displays in red in Firefox but in black in Edge. <html> <body> <span style=" ...

htmlcss

A guide on manipulating an input field to trigger md-datepicker upon clicking

What is the best way to convert an input text into a fire md-datepicker and achieve a similar result like this? ...

javascripthtmlangularjs

Creating a rotating HTML5 video and exporting the result as a canvas image

I'm currently using the jpeg_camera library to display an HTML5 Video on my website (https://github.com/amw/jpeg_camera) Here's how the video output looks in my HTML: <video autoplay="" src="blob:http://localhost:49209/41c42143-5d0e-4525-8fe ...

javascripthtmlhtml5-video

Dynamic visualization with Express and Leaflet powered by Kafka

As a beginner in this field of development, I want to share the settings and code for my Express.js server. Please bear with me if there are any errors. { "name": "nodejstrial", "version": "1.0.0", "descri ...

javascripthtmlexpressapache-kafkaleaflet

Chrome causing footer to not remain fixed at the bottom

I've been experimenting with flexbox in order to keep my footer at the bottom of the page, but only when the content is shorter than the viewport. The goal is for the footer to stay below the content if the content is taller, requiring users to scroll ...

csshtmlflexbox

Creating a responsive layout with organized rows and columns using Bootstrap

I'm currently facing some challenges with the arrangement of columns and rows in a bootstrap layout. I'm unsure if it's feasible to achieve what I have in mind using Bootstrap's grid system. Here is the layout I have for larger devices ...

csstwitter-bootstrapbootstrap-4

Effective techniques for managing PHP forms within HTML and CSS by utilizing checkboxes:

I'm struggling with my code, particularly the form section. Here is the HTML code snippet: <form action="index.php/homepage/deleteSelected" method="POST"> <input type="submit" value="Delete Selected"> ...

phphtmlcssajax

The essential file, index.html, could not be located

After months of working on my React project without encountering any errors, I suddenly came across a puzzling issue. I haven't made any changes to the location of the index.html file in the project tree, so I'm at a loss as to why this error has ...

htmlnode.jsreactjs

Floating CSS containers

Apologies for not including a picture. You can view the design I am trying to achieve here. I am attempting to create two boxes with a third box below them, and another box on the right side of the layout. All enclosed within a larger container. Everythin ...

htmlcss-floatcss

HTML modal windows are a great way to show

I have a table in an HTML document that is populated with information from JSON. Within one of the cells, I'd like to insert a link that will open a modal window. The current setup functions correctly; however, I would like the modal window to displ ...

javascripthtmlangularjs

Exploring the world of CSS preprocessors as a beginner

As someone who is still learning CSS, I find it a bit difficult to keep my stylesheets organized. With around 800 lines of CSS, it's becoming more and more challenging for me. While experienced developers might not have an issue with this, it's d ...

css

Using Vue.js to alter the CSS class property

I am exploring Vue.js and looking to modify a CSS class property. Here is the HTML code utilizing the specified class: <div class="customTimer"></div> Here is the corresponding CSS code: .customTimer { width: 100%; height: 1 ...

javascripthtmlcssvue.jsvuejs2

Creating a seamless vertical marquee of several images that continuously scroll from bottom to top without interruption can be achieved by following these

Currently, I am seeking to design a mobile-friendly HTML page that features a border with multiple color images moving smoothly from bottom to top on both the right and left sides of the mobile screen. The transition should be seamless without any gaps o ...

javascripthtmlcss