Ive been fiddling with a lot of informationm ive found here to overlay a transparent TV PNG over a youtube video, and have succesfully gotten it to work on desktop. However I cannot get it to align correctly when viewed on mobile devices (which will be primary viewership). Is there a way I can force different CSS values depending on the device used?
#panel {
position: relative;
width: auto;
height: 625px;
overflow: hidden;
}
#panel-tv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('images/tvoverlay.png') no-repeat center;
pointer-events: none;
z-index: 10;
}
#panel-content-overlay {
position: absolute;
top: 80px;
left: 24%;
width: 720px;
height: 405px;
z-index: 9;
background-color: #000;
}
#embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
<div id="panel">
<div id="panel-tv"></div>
<div id="panel-content-overlay">
<div id="panel-content">
<div id="embed-container">
<div style="width: 683px; " class="wp-video">
<iframe width="710" height="399" src="https://www.youtube.com/embed/ZI2dbyNn8PI?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
It is live currently at http://nickosteel.com for your reference.
Regards
One problem I could see is that you have the tv image larger than it needs to be, meaning it becomes a bit harder. I would do the following changes.
Container (id="panel")
make this max-width to after your tv image and center it with
margin: 0 auto;
TV image
cut it so it had as much to the left as the right, so the panel width to the right, should be as much "transparent" to the left. That makes it much easier to align
use it as an image (<img />) instead of a background, that way it will become responsive and have it's natural height (and width).
set width width: 100%; (this is for the responsive part)
Video
make it responsive, look at this post for that (note you don't need any of the javascript, just html/css)
center it
with this you are good to go for a responsive solution. It would be a bit easier to give you the changes in css and html, but for that you need to have the tv image at the right size to begin with. Hope this makes sense!
Just an opinion of mine, use classes for styling and id for javascript targets.
Related
Thank you for your response. I have images loaded into a container that is positioned relatively. These images are scaled to 17% of its size. I would like to use absolute positioning to change the position of these images on my screen (required). However, when I do so, the images seem to rescale themselves again. I am not certain what I am doing wrong, however I will say, that when I use relative positioning on different images which are also scaled I have no issue at all. A lame work around is to use transform :scale to scale up the images after being moved, but I am not certain why I am having this issue at all. - Thank you !
#div2{
width: 700px;
background-color: green;
}
#div3{
width: 900px;
background-color: orange;
position: relative;
}
#blob {
display: inline-block;
width: 17%;
height: 17%;
object-fit: contain;
position: absolute;
right : 160px;
bottom: 315px;
}
<div id="div3">
<div id="div2">
<img id="blob" src="imgs/blobt.png" alt="blob">
</div>
</div>
Your code does not work.
You should be using classes to do styling most of the time.
If I set a height to parent elements and a z-index to the image it's working.
.div2{
width: 700px;
height: 700px;
background-color: green;
}
.div3{
width: 900px;
height: 900px;
background-color: orange;
position: relative;
}
.blob {
display: inline-block;
width: 17%;
height: 17%;
object-fit: contain;
position: absolute;
right : 160px;
bottom: 315px;
z-index: 10;
}
<div class="div3">
<div class="div2">
<img class="blob" src="https://images.unsplash.com/photo-1619366501246-e8f14df10fcb?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Mountain waterfall">
</div>
</div>
Edit
Let's add some extended explanation
There are lots of useful articles about the difference of ids and classes.
My personal point of view, I try to reserve ids to do JavaScript manipulation, it's more performant to look for a unique key rather than a class, ids are also useful to do page navigation with a link. So, that's why I don't like using them for styling, and classes are useful to (don't)not repeat yourself (DRY), you can use it over and over again, so you may style a div using an id, and later you realize you need the exact same css for another piece of html, you can't add another id tag.
% width and height are calculated based on first ancestor that has those attributes. Otherwise browsers can't do their maths.
I upload image from user and display it on my page. I have also a canvas that I used to mark lines on image. I want to have image displayed in the same place as canvas which is center. Right now image image display starts from center. The problem doesn't exist on Firefox and Chrome but only on Safari. I use also materialize.css in this project.
How can I display image in exact center?
<style>
.image {
position: absolute;
z-index: 1;
}
.container {
display: inline-block;
margin: 0 auto;
position: relative;
width: 100%;
}
.canvas {
position: relative;
z-index: 20;
}
</style>
<div class="container">
<img
width="400"
height="400"
class="image"
/>
<canvas width="400" height="400" class="canvas" />
</div>
Red thing is my image
There are many ways to center an image. In your case, I'd recommend using display: block; margin: 0 auto; and giving it a max-width: 400px; width: 100%; so the image always maintain the aspect ratio and doesn't get bigger than what you want.
If you use width: 400px, when it reaches devices with a small width (phones) it will make the page scroll which is bad UX. Furthermore, you usually don't need the height: 400px. When you add an actual image, let the image fill the height automatically.
Also, avoid putting styles on the markup. All styles should be in the CSS for organization.
Look into learning the basics of HTML/CSS through a course. It doesn't really matter whether you use Bootstrap, Materialize, Bulma, etc. It all comes down to the basics.
.image {
display: block;
margin: 0 auto;
max-width: 400px;
width: 100%;
height: 400px;
border: 1px solid lightgray;
}
Check code on codepen here.
I've tried every combination of properties and attributes I can think of to get this iframe to embed in a WordPress post so that all of it is visible on both mobile and large screens. It seems I need to specify a height to get the whole frame to display, but doing so then stops all the width showing on mobile.
Any help much appreciated.
<div markdown="0" id="island">
<iframe style="width: 100%; border: none" scrolling="no" src="http://devonmathstuition.co.uk/dev/treasure-island/"></iframe>
</div>
You need to create your iframe inside another element (with it's position relative), and place your iframe with an absolute position:
The padding-top: 56.25% is useful for keeping the ratio (16:9) of the iframe.
Working JSfiddle (try resizing the display tab :)).
Html:
<section>
<article id="iframe">
<iframe src="src.html"></iframe>
</article>
</section>
Css:
section{
max-width: 800px;
}
#iframe{
width: 100%;
max-width: 800px;
position: relative;
padding-top: 56.25%;
}
iframe{
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
margin: auto;
display: block;
position: absolute;
}
src: smashingmagazine.com
edit: here's a video of a resizeable iframe :)
edit2: oopps, forgot a section tag
I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.
I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.
#container {
position: relative;
}
#divWithin {
position: relative;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
#imgWithin{
width: 100vw;
height: 100vh;
left: 0;
}
<div id="container">
<img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
<div id="divWithin">Testing</div>
</div>
Any help or ideas would be gladly appreciated
What I am trying to achieve is displayed in an image below:
With 1 being : The image that I want displayed across the screen width (fit screen width)
and with 2 being : The div that I would want to place upon the image
To make a image responsive You need to use a class like this:
.responsive {
width: 100%;
height: auto;
}
If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp
Try changing your css to this:
html, body {
width: 100%;
}
#container {
width: 100%;
position: relative;
}
#imgWithin {
width: 100%;
}
#divWithin {
position: absolute;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
This will make the image the full width of the browser window with the text overlaid on top.
You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further
Why don't you use background: url()?
so new html now is:
<div id="container">
<div id="divWithin">Testing</div>
</div>
and css:
#container {
background: url("Your image url") no-repeat center center;
background-size: cover;
}
learn more about background and background-size
what ever media query you use put every where
CSS:-
.container{
padding: unset;
width:auto;
}
i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me
I'm seeing some interesting z-index behaviour on iOS.
My sample code can be viewed here: https://jsfiddle.net/59mo8s16/4/
I need the #sidebar to be displayed in front of the #slide-in-tip. This is the case when viewed on Chrome (PC and Android) and Firefox (PC). However, on iOS Safari and Chrome, #slide-in-tip appears in front of #sidebar.
I've realised that removing -webkit-overflow-scrolling: touch from the CSS makes it appear as intended across all platforms/browsers. However, I need this in order to provide momentum scrolling for the #container div on iOS. Without it, you get that scrolling that stops as soon as you stop swiping, which provides a terrible user experience.
Any ideas on how to resolve this one? Ideally I'd like a CSS-only solution. Any significant restructure of HTML will cause me some major pain at this point. The sample is a really stripped back version of an already-complete website.
HTML:
html,
body {
height: 100%;
margin: 0;
-webkit-overflow-scrolling: touch;
}
#top-bar {
top: 0;
width: 100%;
z-index: 200;
background-color: green;
height: 85px;
position: absolute;
}
#sidebar {
float: left;
padding: 30px;
background-color: pink;
position: fixed;
width: 310px;
left: 0px;
z-index: 150;
top: 85px;
bottom: 0px;
padding: 0;
padding-bottom: 50px;
}
#container2 {
min-height: 100%;
}
#main {
padding-right: 20px;
height: 100%;
margin: 0;
margin-left: 10%;
line-height: 40px;
text-align: right;
}
#container {
height: 100%;
margin: 0;
position: absolute;
width: 100%;
overflow-y: scroll;
}
#container2 {
padding-top: 75px;
}
#slide-in-tip {
position: fixed;
bottom: 0;
text-align: right;
width: 100%;
z-index: 140;
background-color: blue;
height: 200px;
}
<div id="top-bar">
top-bar
</div>
<div id="container">
<div id="container2">
<div id="sidebar">
sidebar
</div>
<div id="main">
long content - see js fiddle for actual long content
</div>
</div>
</div>
<div id="slide-in-tip">
slide-in-tip
</div>
The documentation offers an explanation for the behaviour you're seeing:
touch
Native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms).
Since you cannot destroy a stacking context after creating one, an element outside of a stacking context cannot interact directly with elements within that stacking context, and you cannot move elements between stacking contexts without moving them physically, you won't be able to work around the stacking issues without restructuring your physical HTML.
Having said that, you shouldn't have to make significant changes to your structure. The best you can do is simply move #slide-in-tip into #container2 as a sibling of #sidebar and #main (where exactly you place it doesn't matter, as long as they are all siblings). For whatever reason, though, this seems to cause severe flickering on scroll in the simulator — I don't have a physical device to test this on, so you'll want to test this thoroughly.
The only CSS-based workaround I can offer is to shorten your #slide-in-tip by giving it a left offset equal to the width of #sidebar. Note that you have conflicting padding declarations in your #sidebar rule such that the width of #sidebar is actually 310px, not 370px. Unfortunately, if portions of #sidebar are transparent and you want #slide-in-tip to be seen through those transparent portions, this will not be an option either.