I am working on a WordPress theme. Initially its bootstrap template has been created. Currently I have an issue in its slider for the testimonials section.
I am using Owl Carousel to create the slider. I have included the following shortcode inside the div in my index.php file:
<?php
echo do_shortcode('[owl-carousel category="testimonial" singleItem="true" autoPlay="true"]');
?>
The slider includes a statement given by the client with the client's image at the bottom in a circle. For the image, I have its CSS looking like:
.img-circle {
margin-top: 20px;
height: auto;
width: 100px;
}
Though the width of the image has been specified but the image picks up the entire width of the div of which it is a part. I want to display only one client in one slide, so I have used singleItem="true" in the short-code. Have been unable to get the required image dimensions. How to contain the image to the required dimensions?
You have to give the width and height attributes to the img markup. Also, it will need to be display: block in order to ignores owl-carousel's 100% width.
You could also include a wrapper around it, will work better.
CSS
.wrapper-circle {
width: 100px;
height: 100px;
}
HTML
<div class="wrapper-circle">
<img src="" alt="">
</div>
If you can`t edit HTML, try applying CSS to your img tag instead:
display: block;
width: 50px;
height: auto;
Check this for more details: http://owlgraphic.com/owlcarousel/demos/one.html
Related
i'm trying to fit couple of components to make each of them to take a full page
i want the first component to fit all the screen (like a landing page)
and to have the browser scroll bar so i can scroll down to see the second component. (i would like to add hover arrow to let the user know he can scroll down)
but when i try to fit them together its showing me them on the same page.
any suggestions?
im using Boostrap4 and flexbox
thanks.
Well if i understand correctly this should do what you want. I made a simple fiddle:
https://jsfiddle.net/o1uwahL8/
HTML:
<div id="componentOne">
Component 1
<div>
Go to two
</div>
</div>
<div id="componentTwo">
Component 2
</div>
I used divs here, but this should not be different from your component selectors.
CSS:
body, html {
height: 100%;
width: 100%;
}
#componentOne {
height: 100%;
width: 100%;
background-color: red;
}
#componentTwo {
height: 100%;
width: 100%;
background-color: yellow;
}
Be sure all the wrapping tags have their height set to 100% or this will not work!
If you have any further questions, ask away.
P.S if you want a smooth scroll to the second component you can use something like this: jQuery scroll to element
The image caption and content is held in place by the image. When window is resized or image is loading the page content jumps up and is then jumps back down again.
Is it possible to prevent the content from moving in this way?
<div class="profile">
<img src="http://lorempixel.com/g/720/720/nature" alt="" />
</div>
See https://codepen.io/atoms/pen/bRdLVe
Built on Chris Ferdinandi's Kraken CSS framework.
This seems to do the trick:
.profile {
position: relative;
width: 100%;
padding-bottom: 100%;
float: left;
height: 0;
}
.profile img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
and the result:
https://codepen.io/atoms/pen/jwbOYe
Now when you reload the page the text stays in place even when the image has not yet loaded. And you can resize the browser window to reflow the contents with the same result.
Not sure if the CSS is entirely correct but it seems to work.
Firstly, you can add a class to your caption, like following:
<p class="image-caption"><small>Image caption</small></p>
And then add a "hidden" class in CSS:
.hidden {
display: none;
}
Then use jQuery to implement this feature:
$(document).ready( function() {
$(".image-caption").addClass("hidden");
$(".profile img").on('load', function() {
$(".image-caption").removeClass("hidden");
})
});
Note: you need to include jQuery in your HTML code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
This depends on if you are going to have consistent image sizes or not. If your images will always be the same size in that spot, you can set a CSS height of the image size on the image (or even your profile div) and that will create the space on the page before the image loads, preventing the jump.
.profile img { height:250px }
If your images will vary in size and you need to avoid distortion, a JS approach like also mentioned here might be a better approach.
I have a one page wordpress site using stratus theme and using Master slider plugin for the slides.All i want to do is to make my slider images responsive and for this purpose i want to add bootstrap responsive image class to images.
But the problem is i don't know where to add because i cannot find that specific div
http://www.tekfocal.com/
<div class="ms-slide-bgcont" style="opacity: 1; height: 864px;"><img src="http://www.tekfocal.com/wp-content/uploads/2016/08/Embeded-Systems-TekFocal.jpg" alt="" title="embeded-systems-tekfocal" style="width: 1856px; height: 1044px; margin-top: 0px; margin-left: -160px;"></div>
rather that adding one more class why dont u just apply "img-responsive" css to ur slider img, dont u think it will work the same way by adding class
just use below code
.ms-slide .ms-slide-bgcont img{
display: block;
max-width: 100%;
height: auto;
}
I ran a gtmetrix.com analysis on my website and it said that I needed to specify image dimensions on some of the images. The link to that is: http://gtmetrix.com/reports/whiztoy.com/IxSgh6L2 How do I use css to do that? I checked the css file but can't locate the exact tags.
If you html is:
<img src="./myimage.png" id="eximg">
Then your css to specify the size should be:
#eximg{
width: 100px;
height: 100px;
}
Of course, adjusting the numbers accordingly.
If the id attribute is not available and there are surrounding divs, then you can try the following.
html:
<div id="eximg-container">
<img src="./myimage.png" id="eximg">
</div>
css:
#eximg-container img{
width: 100px;
height: 100px;
}
I have a setup for a left navigation bar on our website that. The way it is displayed is to have a header image (usually the client's name) at the top of the nav, then to have a table that holds a number of options about what to do. These options vary depending on what the client is. When displaying this nav, there are two images that run down the sides of the primary table, used as borders. These are skinnable images that are one by one pixel images. This way, each client's skin can be a different color while referencing the same image name in the CSS file.
Before we added doc types to these pages, the images were extending to the bottom of the page or the bottom of the content inside of the table, whichever was longer. Now, adding doc types to make the page standard, I cannot get it to do the same thing.
My setup is that I have one DIV as the header which simply holds the header image. Then, I have a DIV as a container with three DIV elements as children. The first and last ones hold the one pixel image as the left and right border and the middle div holds the content table.
I can't set the border image DIVs to 100% height, because the page size will be 100% + the size of the header image. And I can't just rely on the image going to the bottom of the content, because it needs to be the entire length of the page if the content doesn't take up the entire page. I'm at a loss of what to do here, short of using javascript to calculate what the size of the DIVs should be when I resize the page.
By the way, I'm trying to shoot for all browsers, so both IE (at least 9) and Chrome are m test cases. Linking code here to show what my problem is. As you can see, the left, content, and right divs extend past the bottom of the page, which I do not want to happen.
//HTML
<html>
<body>
<div class="NavHeader"> </div>
<div id="NavBody">
<div id="NavLeft"> </div>
<div id="NavContent"> <br> </div>
<div id="NavRight"> </div>
</div>
</body>
</html>
// CSS
html, body {
height: 100%;
}
.NavHeader {
height: 40px;
width: 100%;
background-color: blue;
}
#NavBody {
height: 100%;
}
#NavLeft {
height: 100%;
float: left;
background-color: black;
width: 1px;
}
#NavContent {
height: 100%;
float: left;
background-color: green;
}
#NavRight {
height: 100%;
float: right;
background-color: black;
width: 1px;
}
I've run into a similar case in the past and all I was able to come up with was using javascript...
CSS (as far as I know) doesn't really have that dynamic capability that you are looking for.