Before the holidays my client's site was working fine with the Flickity carousel. But after returning it has completely crashed, but it starts working when I resize the window.
I had a look at the console and I noticed that what is changing is that before I resize the window - the transform/translate code isn't there. But, when I resize it, evenly slightly - they appear again. (see screenshots)
I'm baffled by this as it was working perfectly fine, like I said. Any help would be greatly appreciated.
Thank you.
I have it setup through the Flickity CDN
my CSS -
.carousel {
width: 100%;
}
.carousel-cell {
width: 100%;
height: 500px;
margin-right: 10px;
border-radius: 5px;
left: 102%;
}
.carousel-cell.is-selected {
position: absolute;
left: 0%;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: carousel-cell;
line-height: 200px;
font-size: 80px;
color: white;
}
Related
I have been sitting on this problem for a few days already, searching through a dozen StackOverflow answers, but to no avail.
I want to implement a dynamic box like the one in the picture.
All my current tries have not been successful, I got it working with all 4 sides expanding, or only working with a fixed box size(if the box size changed, all would break), but that's not what I'm trying to achieve here.
Any help would be greatly appreciated!
Edit:
I tried modifying the answers of this StackOverflow post, but I couldn't make it work with just one line expanding, like in the image.
"dynamic" might have been the wrong word choice, I just meant for it to be responsive, without breaking the expanded border line.
Does something like this work for you?
JSFiddle DEMO
.box {
width: auto;
max-width: 200px;
height: auto;
background: white;
border: 10px solid blue;
position: relative;
margin-top: 40px;
}
/* Adding the extended line */
.box:before {
content: "";
display: block;
position: absolute;
right: -10px;
top: -40px;
height: 40px;
width: 10px;
background: blue;
}
/* Dynamic height for test purposes */
.box:after {
content: "";
display: block;
padding-bottom: 100%;
}
<div class="box"></div>
I am searching for something like a "sliding drawer" - however they all span across the entire height of the page.I would like the slide in-out to just occupy the space it needs - and not cover the entire page.I also googled for hamburger menu on similar lines.
I guess I found out the element which I need.Please refer the screenshot below.
My ask is :
What is the element called so that I can search and develop my own version of it.Any pointer will be a great help.
https://www.templatemonster.com/blog/responsive-sliding-drawer-menu-lightbox-effect/
trying this
[demo]
html
<div class="slideOutTab">
Like Us on Facebook
</div>
css
div.slideOutTab {
position: fixed;
width: 150px;
height: 43px;
top: 200px;
left: -107px;
}
div.slideOutTab a {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
text-indent: -999em;
background: 0 0 url('http://s9.postimg.org/okyi00edn/fb_like_us.gif') no-repeat;
}
div.slideOutTab a:hover {
background-position: 0 -43px;
}
You can search for:
Sliding panel, fixed position panel, fixed sliding panel
At least you can start from those search terms and find more stuff as you delve deeper into the examples.
I made a 2 minute search using the above terms and I found a lot of examples that might help you. Give it a shot!
Try with pure css
div.slideOutTab {
position: fixed;
width: 150px;
height: 43px;
top: 100px;
left: -107px;
transition-duration:1s;
-ms-transition-duration:1s;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
}
div.slideOutTab a {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
text-indent: -999em;
background: 0 0 url('http://s9.postimg.org/okyi00edn/fb_like_us.gif') no-repeat;
}
div.slideOutTab:hover {
background-position: 0 -43px;
left:0;
}
<div class="slideOutTab">
Like Us on Facebook
</div>
I think this question is related to Link not working inside floated div but I still can't figure it out.
I have a div as follows:
.fullwidthimage {
width: 100%;
position: relative;
z-index: -1;
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 1;
top: 15px;
width: 100%;
}
#homepagebutton {
position: absolute;
text-align: center;
z-index: 100;
bottom: 50px;
width: 200px;
height: 60px;
left: 50%;
margin-left: -100px;
font-size: 25px;
border: 1px solid black;
border-radius: 5px;
background-color: orange;
color: black;
text-decoration: none;
}
<div class="fullwidthimage">
<img class="noround imageundertext smallimg" src="http://placehold.it/600x800">
<img class="noround imageundertext midimg" src="http://placehold.it/1000x1000">
<img class="noround imageundertext bigimg" src="http://placehold.it/3200x1300">
<img class="noround imageundertext xlimg" src="http://placehold.it/5000x1500">
<h1 class="imageoverlay">Title Here</h1>
Get Started
</div>
The different images are using a CSS media query to display/hide at different sizes. The whole thing is a full width image with a text title and 'button' (that's actually just a link styled to look like a button) over the top of the image.
Whatever links I put inside that div won't work - the text shows on the page, but nothing happens if you mouse over.
Why?!
Links placed immediately outside of the div on the same page work just fine, so I don't think it's anything to do with other containing divs there.
I'm assuming from that previous question asked that it's something to do with the positioning, but I can't make it work.
Thanks!
If you give a -1 in z-index, it goes behind body. So the whole div.fullwidthimage becomes unclickable or unaccessible. So, give z-index: 1 as the starting point.
.fullwidthimage {
width: 100%;
position: relative;
z-index: 1; /* Change this! */
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 2; /* Increase this! */
top: 15px;
width: 100%;
}
The following is my code for positioning text over image. The requirements are:
Image should be adapt to screen automatically. Even on smart phone, the image should be displayed completely. Only showing part of the image is not allowed.
Text should be accurately positioned anywhere I wish.
.txtimg{
position: relative;
overflow: auto;
color: #fff;
border-radius: 5px;
}
.txtimg img{
max-width: 100%;
height: auto;
}
.bl, .tl, .br,
.tr{
margin: 0.5em;
position: absolute;
}
.bl{
bottom: 0px;
left: 0px;
}
.tl{
top: 0px;
left: 0px;
}
.br{
bottom: 0px;
right: 0px;
}
.tr{
top: 0px;
right: 0px;
}
<div class="txtimg">
<img src="http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg">
<p class="bl">(text to appear at the bottom left of the image)</p>
<p class="tr"> (text to appear at the top right of the image)</p>
</div>
However, the bottom left text is hide from fully displayed on my firefox browser.
It is wired that the code snippet runs pretty well in stackoverflow by clicking the Run Code Snippet below.
I don't know why. Anywhere I found a solution: change overflow:auto to overflow:visible. The problem will disappear.
Anyone advice?
I can't reproduce the problem on this specific code, but i know the problem. Simply add a vertical-align on the image.
.txtimg img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
This also work like this :
.txtimg img {
max-width: 100%;
height: auto;
display: inline-block;
}
Finally I found the problem. In another CSS class, I have already include the "overflow:hidden" line. So, I remove the corresponding line in class txtimg.
I have a div that use as a PopUp to take pictures with the WebCam,
was perfect on my monitor (1366x768), but, on smaller screens, the div is
horrible
HTML:
<div id="light" class="white_content">
<a id="close_ic" href = "javascript:void(0)" onclick ="closediv()" >x</a>
<canvas id="canvas" width="500"height="375"> </canvas>
<video autoplay id="videoElement"></video>
<input type="button" value="Capturar Foto" id="save" class="cam_btn_canvas" />
</div>
CSS:
.white_content
{
display: none;
position: fixed;
top: 15%;
left: 17.5%;
width: 65%;
height: 62%;
border-style: solid;
border-width: 1px;
border-color: #474747;
background-color: white;
z-index: 1002;
overflow: auto;
border-radius: 10px;
min-height: 398px;
min-width: 657px;
}
.cam_btn_canvas
{
font-weight: bolder;
left: 46%;
top: 75%;
position: inherit;
}
#videoElement {
width: 32%;
height: 48.5%;
background-color: #666;
z-index: 1102;
left: 50%;
top: 139px;
position: inherit;
}
#canvas
{
width: 32%;
height: 48.5%;
background-color: #666;
z-index: 1102;
left: 18%;
top: 139px;
position: inherit;
}
#close_id
{
font-size: 15pt;
font-weight: bolder;
position: inherit;
left: 80%;
top: 106px;
}
I wanted to know how to make both my window and the elements inside keep the ratio even with a smaller screen
Thanks for attention!
Not answering your question directly but here are two fixes for your issue.
Media Query
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Developers use these when making their site more responsive.
Here is an example of making my container responsive.
#media (min-width: 768px) {
.container {
max-width: 730px;
}
}
Bootstrap
Bootstrap is a framework designed for creating mobile first projects on the web. Since I have been using Bootstrap, I have never once looked back. You can easily make your site responsive by using preset classes with their markup and css. It makes it so you will never really have issues like the one you are experiencing now.
Check out Bootstrap or any other Front-End framework. They are great.
you might find my jQuery plugin here useful, it will allow you to target just the popup div and set different layouts for the items within it according to how wide that div is. While you avoid script with media queries, you can only use them to change layout based on the width of the whole screen rather than the width of the container.