Problem with image dimensions in Owl Carousel

I have been working on customizing a WordPress theme that originally utilized a bootstrap template. However, I am currently facing an issue with the slider designed for the testimonials section.

To create the slider, I decided to use Owl Carousel and included the shortcode below within the div in my index.php file:

<?php
    echo do_shortcode('[owl-carousel category="testimonial" singleItem="true" autoPlay="true"]');
?>

The testimonial slider is supposed to display a client's statement along with their image in a circular format at the bottom. For styling the image, I added the following CSS code:

.img-circle {
  margin-top: 20px;
  height: auto;
  width: 100px;
 }

Despite specifying the width of the image, it ends up taking the full width of the containing div. I intend to show only one client per slide, hence I used singleItem="true" in the shortcode. However, I am struggling to confine the image within the desired dimensions. Any suggestions on how to achieve this?

csswordpresstwitter-bootstrap

Answer №1

To ensure proper display, make sure to specify the width and height attributes for the img tag. Additionally, set it to display: block in order to override Owl-carousel's 100% width setting.

For better results, consider wrapping the image within a container as shown below:

CSS

.wrapper-circle {
    width: 100px;
    height: 100px;
}

HTML

<div class="wrapper-circle">
    <img src="" alt="">
</div>

If you are unable to modify the HTML, you can apply CSS directly to the img tag like so:

display: block;
width: 50px;
height: auto;

For more information, refer to this link:

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 a form with an input field and an image side by side in HTML

I've been attempting to display an HTML input element and an SVG image on the same line without success. I've tried various solutions from stackoverflow, but none seem to work for me. Here's my current HTML code: <div id = "inline_eleme ...

htmlcsssvg

Trouble with CSS table background display in Outlook

I am experiencing issues with an HTML table in an email template: <table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"> <tbody> <tr> &l ...

htmlcss

Resolution-specific CSS styling

As a newcomer to website development, I have some knowledge of CSS, HTML, and Javascript. However, I am encountering issues with my website. When viewed on low screen resolutions or mobile devices, the right side of my site is cut off, making it impossible ...

javascripthtmlcssscreen-resolution

Properly spaced website images

I'm trying to display my images side by side with a slight margin in between them. However, when I apply a `margin-right: 10px;` to each div, the last image doesn't line up properly with my title bar. Is there a way to create spacing between the ...

htmlcssmarginspacing

Struggling to properly align right navigation items in Bootstrap 4 for responsive displays

After spending some time trying to solve this issue, I realize that I may not be as experienced with Bootstrap as I thought. Here's my dilemma: I am attempting to design a navigation bar using Bootstrap 4, where most menu items are on the left and the ...

htmlcssbootstrap-4

Delightful Bootstrap Tabs with Dynamic Content via Ajax

My website has a lot of tabs designed with Bootstrap. I wanted to make them responsive, so I tried using a plugin called Bootstrap Tabcollapse from https://github.com/flatlogic/bootstrap-tabcollapse (you can see a demo here: http://tabcollapse.okendoken.co ...

javascriptjqueryajaxtwitter-bootstrap

Tips for ensuring the border matches the size of the image

I am in the process of creating a website that includes a filter option. My plan is to have the filters displayed on the left side and the items on the right side. To achieve this layout, I have implemented a scrollable div for the items. However, I notic ...

javascripthtmlcss

Setting the default value for ngModel does not receive any information from the model

I am trying to populate a form with default values using the code below: <h3>ِStart Time</h3> <div class="row" > <div class="col"> <label for="startTime">Hour(s) </label> <input type="numb ...

htmlcssangulartypescript

The navigation bar fails to display correctly on Internet Explorer 10

Encountering problems with IE 10. View the code here. While on the latest Chrome and Firefox, all text appears in a single line, IE displays it differently. Other modern browsers produce a different result altogether. ...

cssinternet-explorerinternet-explorer-10flexbox

"Enhance Your Website with jQuery's Dynamic Multi-Animation

I'm facing an issue with my website where, upon clicking the contact link in the navigation bar, a contact box slides down and the navigation bar moves below it. However, when the contact link is clicked again to hide the contact box, the navigation b ...

javascriptjqueryhtmlcss

Using the ng-app directive value with HTML and CSS can sometimes cause issues and the styles may not apply

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=mainapp&p1=Error%3A…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463) <body ng-app=""> It was working fine unt ...

cssangularjsng-app

Unable to stretch div despite having content within

I have encountered a problem with my containing div not growing with the content, despite trying various solutions such as using 'clear'. It seems that even when I apply 'clear' to different elements below, the parent div refuses to exp ...

csshtmlcss-float

The radio button element could not be located using the attribute "checked="Checked""

While working with Geb, I encountered an issue using the code div.find("input","checked":contains("checked")). This is the snippet of code I attempted to use in order to locate the checked radio button on a webpage. However, I received an error when using ...

javascripthtmlcssseleniumgeb

Element that moves in conjunction with scroll (without using position:fixed)

A while back, I stumbled upon something that I can't seem to find now. I'm looking for a shopping cart similar to the one on the Apple store - a div element that isn't positioned absolutely or fixed. Ideally, it would be located in the cente ...

jquerycss

Using jQuery to reveal and conceal elements upon hover interaction

I have implemented a basic jquery function to display and hide a div when hovering over an anchor. However, the issue I am facing is that the div disappears when I move my cursor away from the anchor tag. I want to be able to interact with the div without ...

jquerycss

Is it possible to modify the CSS of a parent element in vue.js only for the current router route?

I am trying to modify the parent component's style without affecting the CSS of other components. Here is an example from my code: App.vue <div class="page-content"> <router-view ref="routeview"></router-view> </div> rou ...

cssvue.js

Using regular expressions to eliminate the width attribute from tables

Currently, I am carrying out some HTML processing before storing the data in the database. If a user pastes content containing HTML tables, I need to eliminate certain tags and attributes. To extract the table content, I am using content.match('<t ...

javascripthtmlcssregex

What's the deal with this occurrence? The width of the HTML window seems

Exploring different html markup and layouts, I stumbled upon this JSFiddle: http://jsfiddle.net/vLJAq/15/. I made some modifications to it, but one thing that puzzles me is why the green box disappears when the window width is reduced? Here's the cod ...

htmlcss

Scrolling horizontally with Bootstrap 4

I'm having trouble with this issue: I need my "Factuur" (Dutch for invoice) to always be at a width of 800px, but on mobile devices, the rows are collapsing into each other. I want the invoice to remain static and be scrollable. Below is my CSS code: ...

phphtmlcss

Is there a way to prevent a tag from being clickable on the entire row, except for the actual link itself?

My question is why, when using the a tag, the entire row on the right becomes clickable as well? Despite there being no link, the area at the back of the row on the right side is clickable. Is there any way to remove this clickable area? <a id="ba ...

htmlcss