Specifically on this page on an iPhone you can't scroll while on top of the picture. I have been trying to figure it out for hours and I'm praying someone here may have some experience.
http://epiqvapor.com/product/cosmic-fog-milk-honey/
Hi there instead of using an img tag. Use a div and add a background image to it rather.
Instead of
<img width="100" height="100" src="example.jpg"/>
use
<div style="background-image: url('example.jp'); width:100px; height:100px;"></div>
This should solve your problem for mobile :)
Related
This is a very specific issue but I'm attempting to mask an image that is blurred and place it directly over a video so that there is a gradient fade into obscuring half of the video.
What happens when all 3 of these conditions are present (Video, blur, and mask-image) is that overlaying (masking) image will start blurring into transparency at the borders of the CONTAINING div, instead of it's own borders. This means that no matter how large I make the image mask or however I move it, it will never touch and completely obscure the edges of the video.
<div id="container">
<div id="background-image-mask></div>
<video><source src=""></video>
</div>
#background-image-mask {
height:105%;
width: 105%;
background-image: url('...');
-webkit-image-mask: gradient(...);
filter:blur(5px);
}
#container {
overflow:hidden;
}
You can see a codepen here: https://codepen.io/mcheah/pen/mGEbPW
Does anyone know of a way to get around this? Some CSS property that I'm unaware of? Or another potential workaround?
Thanks so much!
If anyone needs a workaround, I simply included an additional image behind the original image, which was not blurred out.
ie:
<img src="123.jpg" class="blur-me">
<img src="123.jpg" class="normal">
This covers the edges and you can't really tell that the edges are not as blurred.
I was trying to fix something in Bootstrap's carousel; I have big wide images in the carousel for larger displays. I needed them to be center aligned in the carousel.
I ended up using this display:flex solution provided in this link.
As far as centering the images, it worked. But now I'm facing another problem.
It seems that the transition runs smoothly only until the next images reaches the left border of the div. After that, it jumps directly to the centered position.It looks like there's this jump on bump, and it looks really bad.
Here's the code I'm using:
<div class="carousel-inner" role="listbox" style="display:flex; justify-content:center; height:415px; overflow:hidden;">
<img src="images/produtos_02.png" alt="text" style="flex:none;">
project link with this problem (home page, right below the main menu).
Any thoughts on how to end this bump? Tried margin-left:auto / margin-right:auto but no success.
H everyone. Please help me out. I am using this grid based framework. in the middle I have 3 images like this
<section class="row">
<div class="col-4">
<img src="img/seo.jpg" alt="seo work" class="work-type">
<h3 class="work-title">seo specialist</h3>
</div>
<div class="col-4">
<img src="img/webdesign.jpg" alt="web design work" class="work-type">
<h3 class="work-title">web designer</h3>
And for the specific img class I am having this CSS for making it responsive
.work-type{
max-width: 100%;
height: auto;
}
Now. three images have different height and they are taking different space height wise inside the grid box. what CSS do I use to have them all appear with the same height?
You can do this easily with CSS and background images.
http://codepen.io/anon/pen/EyZxoP
In this codepen, I display your current issue with the proposed solution.
If you want the images to be a part of the markup, then you'll need to provide more information about the solution you're looking for. (What should happen with the images that are being forced to become the same dimensions? Are we stretching them? Cropping? Are these images dynamically loaded? Hardcoded in the source? Are they featured images for a custom post type, like a staff post-type? Is this wordpress? Contextual layout details would be good, too.)
I've given divs the background-image properties to quickly/easily avoid skewing and stretching, as well as any other form of distortion because of layout stuff. This method can be used for responsive layouts as well.
.img-cont{
height:200px;
width:200px;
}
I am trying to create a simple black box that spans the top of my web page.
Currently I have this:
<canvas id="block" align="center" height="250" width="5000"
style="border:1px solid #000000;background:#ffffff;position:absolute;top:-100px;z-index:10;">
Initially I tried making it a percentage, but it's far too complex for me.
I need to prevent the box from causing the page to scroll to the sides.
I'm sure this is a very simple thing, probably the main issue I am having is not knowing what to search for.
I have been googling for 2 hours now.
Yo can simply use overflow:hidden
example:
<div style="overflow:hidden; width:200px; height:200px;position:relative;"></div>
Watch the demo: jsFiddle Live Demo
I am trying to create a simple black box that spans the top of my web page.
If you're trying to accomplish this then all you need to do is the following:
<div style="background-color:#000;height:10px;width:100%;"></div>
and place it directly under your opening <body> tag.
I'm confused as to why you are setting width:5000px; on a canvas, if you're expecting to make a canvas element wider than the viewport and still not allow scrolling then you need to set overflow:hidden on the body element.
body {
overflow:hidden;
}
If the unwanted scrolling is due to user pressing arrow keys in your application, then you should be telling the browser that you are handling the arrow keys yourself by executing:
event.preventDefault();
in the handler for keyboard events.
Additionally html {overflow: hidden} might work too.
what I'm trying to do is something like this:
<body>
<div id="content" style="position:relative;">
...some content here...
THE END
<div class="red_square" style="position:absolute;right:0;bottom:-90px;height:90px;width:90px;background-color:red;"></div>
</div>
</body>
but that obviously just shows the red square at bottom. What I want is the page to stop at "THE END" if it's long enough (that is, whith scroll bars), and show the red div only for pages with little content (without scroll bars). I can do it with javascript but I was wondering if there is a pure CSS (2 or 3) solution for the most recent browsers.
Not sure if i get what your trying, perdon if in wrong.
There is max-height and min-height in the recent browsers, thats prolly help you