It looks like on older versions of fancybox there was a thumbnail helper that would center the thumbnails under the image.
Following the example here: https://codepen.io/fancyapps/pen/PdMvML
I can put the thumbnails along the bottom, but I'd like to center the thumbnails. Has anybody already figured out how to do this?
Here is the CSS to but the thumbnails on the bottom:
#media all and (min-width: 768px) {
.fancybox-thumbs {
top: auto;
width: auto;
bottom: 0;
left: 0;
right : 0;
height: 95px;
padding: 10px 10px 5px 10px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.3);
}
.fancybox-show-thumbs .fancybox-inner {
right: 0;
bottom: 95px;
}
}
And here is the javascript to launch the thumbnails automatically.
$('[data-fancybox="images"]').fancybox({
thumbs : {
autoStart : true,
axis : 'x'
}
})
You can center all the thumb images using this:
p.imglist {
text-align: center !important;
}
<p class="imglist"> </p>
Because the images are coming in the p tag with the class .imglist. Using this all the images will come in the center.
Related
I am using ionic modalPopup
but i want to have the modal full width appearing from the buttom like this in materialise.css ( check the modal buttom sheet style).
how can i do that with ionic ?
There is a discussion here but still it was about centring and not absolute buttom so this did not work
.modal-center {
position : absolute;
bottom: 0px;
min-height: 0;
}
Would be great if you offer an edit to this codePen
It's easier than you think. Add this css:
#media (min-width: 680px){
ion-modal-view.modal {
top: 50%;
right: 0% !important;
bottom: 0% !important;
left: 0% !important;
min-height: 240px !important;
width: 100% !important;
}
}
I want to display a play button in share thumbnails like is picture :click here to view
Thanks in advance!
place the thumbnail in a div with a class name
<div class="play-icon">
<?php the_post_thumbnail();?>
</div>
then in your css:
.play-icon{
position:relative;
}
.play-icon:before{
content: "";
height: 75px;
display: block;
width: 75px;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-image: url('images/play-icon.png');
}
i made a quick svg image of a play icon - you can use your own.
http://itshappeninghere.com/mobile/explorer.php
Pulling up the page above in a browser will show that the list items for the menus at the top and bottom (collapsed by default), fill the viewport.
Pull up the same page on an ipod touch or iphone, the list items won't fill the viewport on portrait (there is a small gap on the right), but on landscape the page looks fine.
Is there anyway to fix this or is it just a quirk of css rendering?
Here's the CSS for the list items.
ul#m_nav li {
width: 16.667%;
min-height: 10px;
float: left;
-webkit-border-radius: 0;
border-radius: 0;
}
.mobile #filters ul li {
width: 16.667%;
min-height: 10px;
float: left;
-webkit-border-radius: 0;
border-radius: 0;
}
I think it is due to CSS rendering and the percentage-based widths that you're using. Webkit might be rounding it off differently than you intend - these things sometimes crop up.
Instead of floats with a percentage based width, could you try table display properties:
#filters ul {
width: 100%;
margin: 0;
padding: 0;
display:table;
}
#filters ul li {
padding: 0;
margin: 0;
display: table-cell;
height: 10px;
}
Check out this JS fiddle to see what it does.
I've been playing around with making shapes in CSS. I'm finding that it's all fine and dandy until you want to add a box-shadow or border to your element that was created with both a ::before and ::after pseudo element.
Here's an example I put together of a plus (+) icon made with two elements. I'm attempting to put a box-shadow on both the elements, but of course don't want the top most element's (::after, in this case) shadow to overlap the bottom element.
http://codepen.io/trevanhetzel/pen/Gsurk
Has anyone found any clever tricks around this?
Here's the code, by the way (Sass and Compass FTW!)
<a class="add"></a>
.add {
position: relative;
float: left;
padding: 2em;
background: green;
&::before {
content: "";
position: absolute;
left: 45%;
top: 25%;
width: 10%;
height: 50%;
background: #fff;
#include box-shadow(-2px -2px 0px rgba(0, 0, 0, .75));
}
&::after {
content: "";
position: absolute;
left: 25%;
top: 45%;
width: 50%;
height: 10%;
background: #fff;
#include box-shadow(-2px -2px 0px rgba(0, 0, 0, .75));
}
}
Which outputs something like this: http://t.hetz.co/Rpne
It has poor browser support at the moment but the filter:dropshadow property can be used
-webkit-filter: drop-shadow(4px 0px 1px black);
-moz-filter: drop-shadow(4px 0px 1px black);
filter: drop-shadow(4px 0px 1px black);
Codepen Example
I have set up a nice little slider using the following CSS:
/*SLIDER
===================================
*/
#full-slider-wrapper {
overflow: hidden;
}
#full-slider {
position: relative;
width: auto;
min-height: 1200px;
margin: 0 auto;
}
#full-slider .slide-panel {
position: absolute;
top: 0;
left: 0;
width: auto;
visibility: hidden;
}
#full-slider .slide-panel.active {
visibility: visible;
}
#full-slider-nav-left
{
position: fixed; top: 550px; width: auto; margin: auto 0 auto auto;
left: 0; width: 0; height: 0; cursor: pointer; border: 20px solid transparent;
}
#full-slider-nav-right {
position: fixed; top: 550px; width: auto; margin: auto auto auto 0;
right:0; width: 0; height: 0; cursor: pointer; border: 20px solid transparent;
}
#full-slider-nav-left {
border-right-color: #BBB;
}
#full-slider-nav-left:hover {
border-right-color: #999;
}
#full-slider-nav-right {
border-left-color: #BBB;
}
#full-slider-nav-right:hover {
border-left-color: #999;
}
As you can see, I have set the navigation arrows on either side of the container. They remain fixed as I scroll up and down the page. I'm using the responsive Skeleton framework and when I collapse the browser down to mobile size, the arrows work fine. The arrows also work fine on the android platform. However, when I attempt to browse the website on an iPhone, the arrows jump around as I scroll and then disappear.
From what I have read, iPhones have had problems with position:fixed in the past, however this was supposedly resolved with iOS 5.
Unfortunately I don't have a live version of the site to demonstrate the issue.
Any help would be greatly appreciated.