I need a curved vertical line with 5 dots like this -
On hovering over each dot, text should slide besdide it from left to right, and text should disappear on taking away the mouse.
So far I have only been able to indent and place those 5 dots by means of modifying margin-leftproperty for each item in the list. I am not able to get the curved line. How do I achieve that?
Background:
Border-radius is really great for creating the appearance of curves. The problem is that anything inside an container which is curved using this style ignores said curving. As you pointed out, we need to use margins. However, by keeping everything symmetric, we can keep the margin-lefts to three sets, one of which doesn't require a class.
Answer:
We can get away with a very simple structure here:
<ul>
<li><span>Text</span></li>
</ul>
We have the ul as the outer wrapper with the top and bottom horizontal borders. We use a ::before pseudo-element attached to the wrapper, to create the curved line. Each li is the menu entry. The blue circles are created with ::before pseudo-elements attached to the li, and we can achieve the text animation via the span inside. We could get away with not having a span, but we'd need to declare the actual text content in the CSS, and I think it belongs in the HTML.
The CSS isn't too bad. We curve the ul::before and give it the border. We make it larger than 100% because the curve you show cuts off the top and bottom.
Screenshot:
Code:
ul {
height:300px;
width:300px;
margin:0;
padding:0;
list-style:none;
position:relative;
border-top:solid 2px black;
border-bottom:solid 2px black;
overflow:hidden;
}
ul::before {
height:133%;
width:133%;
border-radius:50%;
border:solid 2px black;
display:block;
position:absolute;
top:-18%;
left:10px;
content:"";
}
li {
margin:28px 0;
color:lightblue;
font-style:italic;
font-weight:bold;
overflow:hidden;
}
li::before {
height:20px;
width:20px;
content:"";
display:inline-block;
background-color:lightblue;
border-radius:50%;
position:relative;
top:4px;
margin-right:6px;
}
li.right {
margin-left:30px;
}
li.middle {
margin-left:6px;
}
li span {
position:relative;
left:-100%;
transition: left 200ms ease-in;
}
li:hover span {
left:0;
}
<ul>
<li class="right"><span>Anecdotes</span></li>
<li class="middle"><span>Interviews</span></li>
<li><span>Records</span></li>
<li class="middle"><span>Recent Stats</span></li>
<li class="right"><span>Recent Snaps</span></li>
</ul>
Success! As mentioned, this might be better using Canvas, or possible SVG. But if you want to stay strictly with HTML & CSS, this should help.
Second Method
Another way we can do this, staying with HTML & CSS, is to use transform:translate. I thought this might be easier and more reliable, but it turns out it requires more CSS and more classes. However, I got it working so I'm going to post it here anyway, because despite that it's pretty cool I think.
ul {
height:300px;
width:300px;
margin:0;
padding:0;
list-style:none;
position:relative;
border-top:solid 2px black;
border-bottom:solid 2px black;
overflow:hidden;
}
ul::before {
height:133%;
width:133%;
border-radius:50%;
border:solid 2px black;
display:block;
position:absolute;
top:-17.5%;
left:10px;
content:"";
}
li {
margin:0;
color:lightblue;
font-style:italic;
font-weight:bold;
overflow:hidden;
position:absolute;
top:50%;
left:50%;
line-height:30px;
margin-top:-15px;
}
li::before {
height:20px;
width:20px;
content:"";
display:inline-block;
background-color:lightblue;
border-radius:50%;
position:relative;
top:4px;
margin-right:6px;
}
li.one {
transform: translate(60px) rotate(-140deg) translate(208px) rotate(140deg);
}
li.two {
transform: translate(60px) rotate(-160deg) translate(208px) rotate(160deg);
}
li.three {
transform: translate(60px) rotate(-180deg) translate(208px) rotate(180deg);
}
li.four {
transform: translate(60px) rotate(-200deg) translate(208px) rotate(200deg);
}
li.five {
transform: translate(60px) rotate(-220deg) translate(208px) rotate(220deg)
}
li span {
position:relative;
left:-100%;
transition: left 200ms ease-in;
}
li:hover span {
left:0;
}
<ul>
<li class="one"><span>Anecdotes</span></li>
<li class="two"><span>Interviews</span></li>
<li class="three"><span>Records</span></li>
<li class="four"><span>Recent Stats</span></li>
<li class="five"><span>Recent Snaps</span></li>
</ul>
Here's how you can achieve the curve, dots, and text display below. You have to adjust it to suit your need.
#arch {
border-left: solid 2px black;
border-radius: 50%;
height: 500px;
width: 300px;
margin-left: 100px;
padding-top: 100px;
margin-top: -80px;
}
#arch-outer {
/* serves as a blade to cut off overly curved area */
height: 450px;
width: 300px;
overflow: hidden;
/* Cuts off the overly cured area */
}
#arch li {
font-size: 76px;
height: 85px;
color: rgb(153, 217, 234);
}
#arch li:nth-of-type(1) {
margin-left: 20px;
}
#arch li:nth-of-type(4) {
margin-left: 15px;
}
#arch li:nth-of-type(5) {
margin-left: 40px;
}
#arch li a {
font-size: 20px;
line-height: 76px;
vertical-align: middle;
color: rgb(153, 217, 234);
}
<div id="arch-outer">
<div id="arch">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
<li>Four
</li>
<li>Five
</li>
<ul>
</div>
<!-- End arch -->
</div>
<!-- End arch outer -->
View on jsfiddle
You can create 1 blank <div class="curve"></div> and display only left border of that div as below:
.curve{
border-left:2px solid #000;
height:200px;
width:100px;
border-radius:50px; /*see how much you want to curve*/
}
OR else
create 1 curve image and apply to that background div and with help of position float your dot div on it and with hover effect show your text.
check here http://jsfiddle.net/Lz97rgyf/2/
Related
I have a list of users - approved and awaiting approval. To that I need to add the button at the bottom that unfolds the list of archived users - on top of the approved/awaiting approval lists. It should give the transition like collapsible component - folding/unfolding the div on top of the previous one. And I don't know where to start. The most obvious thing to do is:
<div class="approved_users">
</div>
<div class="archive" style="display: none">
</div>
<button type="button" id="show_archive" onclick="myFunction()">Show archive</button>
function myFunction() {
var archive = document.getElementById("archive");
var app = document.getElementById("approved_users");
if (archive.style.display === "none") {
archive.style.display = "block";
app.style.display="none";
} else {
archive.style.display = "none";
app.style.display="block";
}
}
But I do not know how to achive the "unfold" transformation effect.Could you help?
The folding effect on hover is actually fairly simple. For the HTML, all you need to add is a button in a navbar, as well as a list with the items (in your case, the approved accounts and waiting approval accounts).
<nav>
<li class="hov">Approved Accounts
<ul class="main">
<li>Crystal Bell</li>
<li>Frederick Adams</li>
<li>Add</li>
<li>More</li>
</ul>
</li>
</nav>
The bulk of this effect, though is in css. I demonstrate the effect for you in this demo (HTML and CSS only):
ul,li{
margin: 0;
padding: 0;
}
.main{
position:absolute;
z-index:1;
}
.main li{
list-style:none;
background: blue;
width:100px;
padding: 0 5px;
border: 1px solid black;
height: 30px;
line-height: 30px;
-webkit-transition: all .5s ease-in-out;
}
.main li:nth-child(odd){
-webkit-transform-origin: top;
-webkit-transform: perspective(350px) rotateX(-90deg);
}
.main li:nth-child(even){
margin-top:-65px;
-webkit-transform-origin: bottom;
-webkit-transform: perspective(350px) rotateX(90deg);
}
.hov:hover li:nth-child(odd){
-webkit-transform-origin: top;
-webkit-transform: perspective(350px) rotateX(0deg);
margin-top:0;
}
.hov:hover li:nth-child(even){
-webkit-transform-origin: bottom;
-webkit-transform: perspective(350px) rotateX(0deg);
margin-top:0;
}
.main li:first-child{
margin-top:0;
}
.hov{
position:relative;
height: 40px;
width:112px;
background: green;
color: white;
font-size: 13px;
font-family: Helvetica;
font-weight:bold;
text-align: center;
line-height: 40px;
list-style:none;
z-index:2;
}
<nav>
<li class="hov">Approved
<ul class="main">
<li>Crystal Bell</li>
<li>Frederick Adams</li>
<li>Add</li>
<li>More</li>
<li>To</li>
<li>This</li>
<li>List!</li>
</ul>
</li>
</nav>
As you can see here, this css code works for any number of list items, so you can use it for any number of approved accounts you have. In your case, though, you should create many of these buttons for your other types of accounts (awaiting accounts).
for some reason I don't manage to display 3 small images next to each other in 1 line. They are aligned vertically.
Code is like this:
var customOptions =
{
'maxWidth': '600',
'width': '400',
'className' : 'popupCustom'
}
var customPopup = "<b>Center</b>Test<br><br><div><center><a href=pinlisting.php?hideid=><img src=images/hide.png height=15.5 width=18></a><a href=delete2.php?delete&pin_db_id=1><img src=images/delete.png height=15.5 width=18></a><a href=index.php><img src=images/zoom.png height=15.5 width=18></a></center></div>";
L.marker(["coordinates"], {icon: "myIcon"}).addTo("myLayer").bindPopup(customPopup,customOptions);
Seems like some css problem but no clue
For demo purposes I made your code more static: I used HTML and CSS with flexbox, which can easily be converted to be generated by some JS:
<div class="map">
<h3>Map with Tooltip</h3>
<div class="tooltip">
<div class="arrow"></div>
<div class="title">Title</div>
<div class="desc">Description</div>
<div class="icons">
<a href="#">
<span class="icon icon-eye"></span>
</a>
<a href="#">
<span class="icon icon-trash"></span>
</a>
<a href="#">
<span class="icon icon-zoom"></span>
</a>
</div>
</div>
</div>
The tooltip is a flex column positioned absolutely at a random position in my fake map:
.tooltip {
display:flex;
flex-direction:column;
background:#ccc;
width:100px; height:100px;
position:absolute; top:20%; left:56%;
padding:10px;
border-radius:10px;
box-shadow:0 0.25em 1em 0 rgba(0,0,0,0.5);
}
The bottom arrow of the tooltip:
.arrow {
display:block;
background:transparent;
width:0;
height:0;
position:absolute;
bottom:-25px;
left:50%;
margin-left:-15px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top:30px solid #ccc;
}
The CENTER element is EXTREMELY deprecated, and there is really no reason to use it anymore, we have lost of powerful new positioning and layout tools in CSS now, so .icons container is a flex box row:
.icons {
flex:1 0 0;
display:flex;
flex-direction:row;
justify-content:space-evenly;
align-items:stretch;
align-content:center;
}
Each icon link shares this CSS rule:
.icons a {
flex:1 1 20px;
border-radius:0.25em;
background:white;
box-shadow:0 0.125em 0.125em 0 rgba(0,0,0,0.25);
padding:0.25em 0.125em;
margin:1px;
width:1em; height:1em;
text-align:center;
vertical-align:middle;
line-height:1;
}
You will want to override the default link style for the icons:
a, .icon {
color:black;
text-decoration:none;
}
And I created some random icons from HTML entities:
.icon-eye:before {
content:"\0260E";
}
.icon-trash:before {
content:"\02605";
}
.icon-zoom:before {
content:"\02665";
}
This entity chart is SUPER handy: https://dev.w3.org/html5/html-author/charref
I also created a :hover state for the icons:
.icons a:hover {
box-shadow:0 1px 0 0 rgba(0,0,0,0.125);
}
My JSBin: http://jsbin.com/saxivi/edit?html,css,output
Based on the vertical stack, it seems that your <a> style was overwritten with display: block;. You could give each <a> specific class name then give them display: inline-block to make them horizontally stacked.
First, give specific class to <a>:
var customPopup = "<b>Center</b>Test<br><br><div><center>
<a class='popupMarker' href=pinlisting.php?hideid=><img src=images/hide.png height=15.5 width=18></a>
<a class='popupMarker' href=delete2.php?delete&pin_db_id=1><img src=images/delete.png height=15.5 width=18></a>
<a class='popupMarker' href=index.php><img src=images/zoom.png height=15.5 width=18></a></center></div>";
Then add css style somewhere:
.popupCustom .popupMarker {
display: inline-block;
}
Declare the following class in your style sheet and use in your code.
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
It worked for me when i had a similar problem.
Change your code to this:
var customPopup = "<b>Center</b>Test<br><br><div><center><img src=images/hide.png height=15.5 width=18></div><img src=images/delete.png height=15.5 width=18></div><a href=index.php><div class="img-container"><img src=images/zoom.png height=15.5 width=18></div>
I have just started coding websites. I just recently started a website for a friend and though it would be cool to have a slide out menu that slide out from the top rather than the left or right of the page. However having done so and got it to work and all then having added some other content to the page have found that I am unable to get a scroll bar when processed through a browser. I have tried in the body tag, "overflow;scroll" which did not work and I have tried adding a div with the height of 3000px
Pls if anyone can help that will be great I will attach all my css and html (take note there is some jQuery and java)
Thanks
HTML & Java
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josh Site</title>
<link rel="stylesheet" type="text/css" href="../CSS/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../jQuery/jquery.cycle2.min.js"></script>
<script src="../jQuery/jquery.cycle2.video.js"></script>
<script src="../jQuery/jquery.cycle2.carousel.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!--Skeleton for Slide out Menu-->
<body class="menu menu-open">
<header>
<nav class="menu-side">
<!--Content for Menu Side-->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li id="logo"><img src="../../Assets/Josh-Logo.png" alt="Josh Meyers"></li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<!--End of Content for Menu Side-->
</nav>
</header>
<!--End of Skeleton for Slide out Menu-->
<!--Button to Toggle "Menu Side"-->
<img src="../../Assets/top-menu-icon.png" width="50px" height="50px" alt=""/>
<!--End of Button to Toggle "Menu Side"-->
<!--Josh Meyers about and Title-->
<div id="Josh-Meyers">
<h1>Josh Meyers</h1>
<p>Photography is the science, art and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film.[1]
Typically, a lens is used to focus the light reflected or emitted from objects into a real image on the light-sensitive surface inside a camera during a timed exposure. With an electronic image sensor, this produces an electrical charge at each pixel, which is electronically processed and stored in a digital image file for subsequent display or processing. The result with photographic emulsion is an invisible latent image, which is later chemically "developed" into a visible image, either negative or positive depending on the purpose of the photographic material and the method of processing. A negative image on film is traditionally used to photographically create a positive image on a paper base, known as a print, either by using an enlarger or by contact printing.
</p>
</div>
<!--Responsive Video Slider and Title-->
<div id="Recent-Projects">
<h1>Recent Projects</h1>
</div>
<div id="video-wrapper">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<div class="cycle-slideshow"
data-cycle-carousel-visible="3"
data-cycle-fx="carousel"
data-cycle-timeout="0"
data-cycle-auto-height="640:360"
data-cycle-prev=".cycle-prev"
data-cycle-next=".cycle-next"
data-cycle-slides=">iframe"
data-cycle-youtube="true"
data-cycle-youtube-autostart="true"
data-cycle-pager=".cycle-pager"
data-cycle-carousel-fluid="true"
>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7TccWhZ6T8c?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/VPuKbzP2KNM?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/DHW0hQHLpTc?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cycle-pager"></div>
</div>
<!--End Responsive Video Slider and Title-->
<script>
(function() {
var body = $('body');
$('.menu-toggle').bind('click', function() {
body.toggleClass('menu-open', 'toggle-open');
return false;
});
})();
</script>
CSS
body {
background-color:black;
overflow:scroll;
}
/*Design for Slide Down menu*/
.menu {
overflow:hidden;
position:relative;
top:0px;
-webkit-transition: top 0.8s ease;
-moz-transition: top 0.8s ease;
transition: top 0.8s ease;
}
.menu-open {
top:231px;
}
.menu-open .menu-side {
top:0px;
}
.menu-side {
background-color:#333;
border-bottom:1px solid #000;
color:#fff;
position:fixed;
top:-231px;
left:0px;
width: 100%;
max-width:100%;
height: 210px;
padding: 10px;
-webkit-transition: top 0.8s ease;
-moz-transition: top 0.8s ease;
transition: top 0.8s ease;
}
.menu-toggle {
position:relative;
display:block;
width:50px;
height:50px;
margin-left:auto;
margin-right:auto;
top:-23.5px;
}
/*Content style for Menu Side*/
.menu-side ul {
width:800px;
max-width:100%;
height:100px;
display:block;
text-align:center;
margin-left:auto;
margin-right:auto;
border-style:solid;
border-color:white;
border-width:thick;
-moz-box-shadow:20px 20px 20px 10px black;
-webkit-box-shadow:10px 10px 10px 10px 10px black;
box-shadow:1px 1px 20px 0.5px black;
}
.menu-side li {
margin-top:auto;
margin-bottom:auto;
padding:10px;
display:inline-block;
text-align:center;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:18px;
font-style:italic;
}
/*Style for Josh Meyers About*/
#Josh-Meyers h1 {
text-align:center;
color:#FFF;
}
#Josh-Meyers p {
color:#FFF;
}
/*Style for Video Slide Show and Title*/
#Recent-Projects {
text-align:center;
height:40px;
width:100%;
max-width:100%;
}
#Recent-Projects h1 {
text-align:center;
color:#FFF;
}
iframe {max-width:100%}
#video-wrapper {
width:100%;
max-width:100%;
height:400px;
margin-top:5px;
}
.cycle-slideshow {
width:100%;
top:2%;
margin-left:auto;
max-width:90%;
margin-right:auto;
}
.cycle-prev, .cycle-next {
font-size:40px;
font-weight:bold;
color:#FFF;
display:block;
position:absolute;
top:60%;
z-index:999;
cursor:pointer;
}
.cycle-prev {left:2%;}
.cycle-next {right:2%;}
.cycle-pager {
text-align: center; width: 100%; z-index: 999; position: absolute; overflow: hidden; top:85%
}
.cycle-pager span {
font-family: arial; font-size: 50px; width: 16px; height: 16px;
display: inline-block; color: #ddd; cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
iframe {
padding-left:5px;
padding-right:5px;
}
You're on the right way. In your .menu you should remove your : overflow: hidden;
Because you put the .menu class within your body the html will hide everything beneath it.
Check out the [JSFiddle]
body {
background-color:black;
overflow:scroll;
}
/*Design for Slide Down menu*/
.menu {
position:relative;
top:0px;
-webkit-transition: top 0.8s ease;
-moz-transition: top 0.8s ease;
transition: top 0.8s ease;
}`
In the .menu class in the CSS change the overflow:hidden to overflow:scroll
I want to use onblur to close a sub-menu. I've got it to "hide" the sub-menu, but it does just that. I want the menu to go back to its original state. I would also like to set a timeout on the menu so it will close after 5-10 seconds.
P.S I tried to make a jsfiddle for this, and it didnt function. Also, this is for a mobile site.
HTML
<div class="smenu_div"">
<ul>
<li>
<a class="menu-title" href="#" onblur="hidemenu()" onclick="showsub()">Menu</a>
<ul id='hiddenMenu'>
<li>Home</li>
<li>Trucks</li>
<li>Equipment</li>
</ul>
</li>
</ul>
</div>
CSS
.smenu_div ul
{
padding:0px;
margin-top:5px;
margin-right:40px;
font-family:georgia;
font-size:70px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:40%;
overflow:hidden;
position: relative;
display: block;
float:right;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0);
line-height:justified;
margin-top: 10px;
position:relative;
}
/* Changed this so that your hidden menu is hidden by default */
.smenu_div li ul
{
z-index: 50;
display: none;
position: relative;
width: 100%;
background: transparent;
float:none;
}
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
background: #000000;
display:block;
position:relative;
}
/* #new */
.smenu_div ul li a.menu-title
{
padding-right: 50px;
background: #000000 url('plus.png') no-repeat right center;
background-size: 75px 75px;
}
.menu-open .smenu_div ul li a.menu-title
{
background-image: url('minus.png')
}
JavaScript
var hidden = true;
function showsub() {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
document.body.classList.toggle('menu-open');
hidden = !hidden;
};
function hidemenu() {
document.getElementById('hiddenMenu').style.display = 'none';
document.body.classList.toggle('plus');
hidden = !hidden;
};
there's a mistake in your html code <div class ="smenu_div""> has one too many quotes, so it breaks jsfiddle.
You almost have it, literally all you're missing in code is
setTimeout(hidemenu,10000);
from showsub. Note, if you want to prevent it from closing after 10s, if the user keeps pressing on stuff, you'll need some extra code, but if you're ok with it closing 10s after the user clicks on menu no matter what then it's ok.
here's the fiddle
The problem is, in one of my pages I have a slide, where my images are 1920x1080 while the slide is just set to 1350 as width. My images are not getting centered, you just see about 1/3 of the picture's top left-middle-ish. The slide also doesn't reach out to the ends (<---->) of the screen, there's this tiny space there. Any solutions?
Picture: http://tinypic.com/view.php?pic=29crp7a&s=6
Code
Html:
<div id="container">
<div id="banner">
<ul class="bjqs">
<li><img src="images/lamborghini/av_lp700-4_roadster_ov3_v2_1920x1080.jpg" title="This is my slideshow!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_home_1920x1080.jpg" title="Apparently it works!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_spyder_home_1920x1080.jpg" title="By Andreas!"></li>
</ul>
</div>
</div>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.min.js"></script>
<script>
$(document).ready(function() {
$('#banner').bjqs({
'animation' : 'slide',
'width' : 1350,
});
});
</script>
Css:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
/* demo styles */
body{
font-family: 'Carter One', sans-serif;
}
#container{
width:100%;
padding:20px 0;
margin:0 auto;
overflow:hidden;
}
#banner {
height:300px;
width:700px;
margin:0 auto;
position:relative;
background:#fff;
#fff solid;
}
ul.bjqs-controls li a{
display:block;
padding:5px 10px;
position:absolute;
background:#000000;
color:#fd0100;
text-decoration:none;
text-transform:uppercase;
}
a.bjqs-prev{
left:0;
}
a.bjqs-next{
right:0;
}
p.bjqs-caption{
background:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
}
ol.bjqs-markers{
position:absolute;
bottom:-50px;
}
ol.bjqs-markers li{
float:left;
margin:0 3px;
}
ol.bjqs-markers li a{
display:block;
height:10px;
width:10px;
border:4px solid #fff;
overflow:hidden;
text-indent:-9999px;
background:#000;
border-radius:10px;
}
ol.bjqs-markers li.active-marker a{
background:#fd0100;
}
The solution is very simple actually.
You need to set a width to your images to 100% in your CSS.
.bjqs img {
width:100%;
}
Hope that helps, good luck