We Keep Coding

Responsive featherlight iframes width

I'm using the featherlight lightbox to open iframes with different widths, please see the 1st 2 links on the fiddle below:
http://jsfiddle.net/sm123456/d5Lvw1rs/
The issue is that I seem I cant seem to be able to make the iframe responsive ie. when the browser window goes below the iframe width, the iframe should switch to 100%.
I've tried the code below which should work great, but doesn't, even when removing data-featherlight-iframe-height="575" data-featherlight-iframe-width="800".
data-featherlight-iframe-style="width: 100% !important; max-width: 800px !important;"
Any assistance would be very much appreciated!

After reading the documentation, I found out you can add a custom class to the lightbox using the data-featherlight-variant="classname" attribute. Using this attribute, I added a different class to both the 800px and the 1350px one. Using that class, I applied the style. Check the JSFiddle to see it in action.
For the 800px width one:
data-featherlight-variant="custom-class-800"
#media only screen and (max-width: 800px) {
.custom-class-800,
.custom-class-800 .featherlight-content{
width: 100%;
}
.custom-class-800 .featherlight-content .featherlight-inner {
margin: 0 auto;
}
}
For the 1350px width one:
data-featherlight-variant="custom-class-1350"
#media only screen and (max-width: 1350px) {
.custom-class-1350,
.custom-class-1350 .featherlight-content {
width: 100%;
margin: 0;
}
}
JS Fiddle

Hey #JimWids
Try to use that CSS:-
.featherlight-iframe .featherlight-content{
/* dimensions: 1140px prevents iframe from spanning the full width of the browser */
width: 80%;
max-width: 1140px;
/* spacing */
margin: 0;
padding: 0;
}
.featherlight-iframe .featherlight-inner{
/* positioning */
display: block;
float: left;
position: relative;
/* dimensions */
width: 100%;
}
.featherlight .featherlight-inner:after{
/* dimensions */
content: "";
float: left;
width: 80%;
height:80%;
padding-top: 57%;
display: block;
position: relative;
}
}
Here is that code:- JS_Fiddle

use this css
#media (max-width: 1024px){
.featherlight .featherlight-content {
width: 100%;
}
.featherlight .featherlight-image {
width: 100% !important;
object-fit: cover;
}
}

Maintain responsive image height

I am attempting to create a CTA component at the top of my react application, that contains the navbar and the CTA text. After successfully completing the component, I am noticing a minor bug that I would like to resolve. I am only providing my image with a width of 100% and no defined height. This causes the divs beneath the image to flicker upwards until the image has fully loaded. I know not providing the image with a defined height is causing it because the bug goes away when I provide the image with a random height. I am wondering if there is a way to provide the image with a responsive height that would behave in a similar way to just providing my image with 100% width.
my css code is as follows:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .container-background {
opacity: 0.25;
}
.container-background-img {
width: 100%;
position: relative;
}
.container .content {
position: relative;
z-index: 1;
}
.app-outer {
max-width: 1170px;
margin: 0 auto;
position: relative;
padding: 0rem 1rem;
}
#media only screen and (max-width: 1170px) {
.container-background-img {
height: 656px;
object-fit: cover;
}
}
#media only screen and (max-width: 768px) {
.container-background-img {
height: 653px;
object-fit: cover;
}
}
/* CODE ADDED */
#navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#content {
position: absolute;
top: 20%;
}
my jsx code is as follows:
import React from "react";
import "./styles.css";
export default function App() {
return (
<>
<div className="container">
<div className="container-background">
<img
id="rob"
src="https://i.imgur.com/iyFtMNA.jpg"
alt="bg"
className="container-background-img"
/>
</div>
<div id="content" className="content">
I am the CTA
</div>
<div id="navbar">
<div
style={{
backgroundColor: "white",
height: 100,
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
I am the navbar
</div>
</div>
</div>
<div>I am beneath the cta</div>
</>
);
}
the following link I have provided contains a code sandbox: https://codesandbox.io/s/issue-react-forked-4lsdm?file=/src/App.js:0-868
Please Note: *** within the code sandbox the issue is not very apparent, but within my react application it is much more noticeable

As you mentioned, the issue is not really clear to see from your sandbox code.
I am not sure this would fix your issue but instead of using image tag try setting your CTA component to have background-image() instead.
Make sure to add other background css attributes too such as
background-repeat: no-repeat;
background-size: cover;
background-posistion: center;
padding-bottom: 60%;
Make sure to add padding-bottom: 60% (Your image seems to have a 3:2(w:h) ratio);
Hopefully, this works for you!

Stop div overlapping another from size increase

My engagement-filtercontainer div used to sit directly above my engagement-graphcontainer unless it was expanded via button click, in which case it drops down into the graphcontainer overlapping. Now the engagement-filtercontainer has grown in size because of additional content and it overlaps my graph container which contained my svg. I need it to dynamically not do this even if my filter increases in size.
I have some divs that are contained in this order:
<div class="Engagement-Container">
<div class="Engagement-Body">
<div class="Engagement-Graph" id="graph">
<div class="Engagement-FilterContainer"
</div>
<div class="Engagement-GraphContainer"
<svg
class="Engagement-GraphSVG"
xmlns="http://www.w3.org/2000/svg"
version="1.1 ">
</svg>
</div>
</div>
</div>
</div>
Notice that the engagement-filtercontainer and graphcontainer are both within the engagement-graph div, and that my svg is contained within the graphcontainer.
In the below image you can see that the filter now with more content expands into the area (I have hidden with css thats why im showing it in dev mode, ive tried various methods to work around this but I think i need a definitive solution.
The CSS:
engagement-graph(parent div)
.Engagement-Graph {
position: absolute;
width: 100%;
height: 100%;
font-size: 100%;
vertical-align: baseline;
overflow: hidden;
#include tablet() {
width: 65%;
}
}
Engagement-graph-container (contains the svg graph that i want to protect from unwanted overlap)
.Engagement-GraphContainer {
position: relative;
width: 100%;
height: calc(100% - 56px);
top: 0;
background-color: $gray-bg-color;
transition: height $filter-slide-duration, top $filter-slide-duration;
#include tablet() {
background-color: white;
height: 100%;
}
svg {
width: 100%;
height: 100%;
}
&--WithFilter {
height: calc(100% - 480px) !important;
top: 480px !important;
#include landscape {
height: calc(100% - 436px) !important;
top: 436px !important;
}
}
}
Filter-container (that is overlapping)
.Engagement-FilterContainer {
overflow: overlay;
display: table;
position: absolute;
width: 100%;
z-index: 10;
transition: transform $filter-slide-duration;
transform: translateY(-486px);
visibility: hidden;
&--Visible {
transform: translateY(0) !important;
}
#include landscape {
transform: translateY(-436px);
}
}
I wish for the filter to work as usual so when its expanded it will appear into the screen but when it is not, I don't want it encroaching upon the graph, no matter how large it gets. When the filter was smaller it was fine it never came into the screen, so it must not be dynamic in how it is sized.
Thank you if you can help.

Hide the scrollbar behind fixed positioned div

I'm building an app in Webkit for Android using HTML and CSS. I have fixed position header and sometimes fixed position footer(based on the module). When the content is more, I don't want the scrollbar to overlay the fixed header. Hiding it behind the header will also work. How can I achieve this without fixing height for the wrapper or using height: calc(); CSS for the wrapper?
I want app scrollbar to be like this:
Instead, it is like this now:
Here is the sample code:
.header {
position: fixed;
background-color: red;
left: 0;
top: 0;
width: 100%;
z-index: 999;
height: 60px;
}
.wrapper {
padding-top: 60px;
min-height: 100%;
height: auto;
}
.footer {
position: fixed;
background-color: grey;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
}
jsfiddle

You said that you don't want to fixe the .wrapperheight, but I think, you should fixe it, because there is no way to hide this scrollbar behind the div header element.
.wrapper {
margin-top: 60px;
min-height: 100%;
height: 320px;
overflow-y: auto;
}
Demo: http://jsfiddle.net/9hy6ybsz/4/

I'm not sure if my solution gonna work for you. You need to setup the height of your div="wrapper" and add CSS property overflow-y:
height: calc(100% - (60px + 50px));
Example, where 60px is the header height and 50px is the footer height
.wrapper {
margin-top: 60px;
overflow: auto;
background: yellow;
height: calc(100% - (60px + 50px));
display:block;
}
Working JSFiddle -> http://jsfiddle.net/9hy6ybsz/1/

Create a new div tag , which acts as a parent tag.
and apply scroll for it.
then create the header div and maintain Fixed position.so you can get the scroll over the fixed DIV!

Scale and center image in variable-size div using JS

http://jsfiddle.net/3qMnM/1/
HTML:
<div class="info-panel"></div>
<div class="image">
<img src="http://placehold.it/960x1400">
</div>
CSS:
.image {
height: 100%;
width: auto;
margin-right: 200px;
}
.info-panel {
position: fixed;
width: 200px;
height: 100%;
background-color: red;
right: 0px;
}
I'm trying to scale images down (never up) dynamically to fit into the image-div (without cropping), which is variable in height (100%) and width (set to auto). The image also needs to be centered (vertically and horizontally) and have equal padding of a few pixels top and bottom.
There is an info panel next to the image container as you can see in the fiddle, but I'm not sure if this is relevant.
Do my statements make sense?
Thanks, I have spent way too much time experimenting with this already! :/

If I understand correctly, you want something like this.
It scales down if the image is too large, but keeps the original size when it fits inside the window. In other words, it never scales up - only down.
It is a combination of CSS and some jQuery:
This short JS centers the image vertically:
function verticallyCenterImage(){
var $img = $('.image img'),
windowHeight = $(window).outerHeight();
if($img.height() < windowHeight){
var delta = windowHeight - $img.height();
$img.css('margin-top', (delta / 2) + 'px');
}else{
$img.attr('style', '');
}
}
And this line of CSS keeps the image centered horizontally:
.image {
padding-right: 200px;
text-align: center; /* <- this one */
max-height: 100%;
overflow: hidden;
}
And to keep the original size of the image, I just set the max height and width on the img inside the .image class, like so:
.image img {
max-width: 96%;
max-height: 96%;
margin: 2%;
}
You can adjust the size and margins to your needs, just remember to keep them in relation too each other :)

Some of the techniques discussed here could work for you:
http://css-tricks.com/centering-in-the-unknown/
The trick there is to use table elements, or CSS 2.1 table display.
Edit: More approaches here: http://www.vanseodesign.com/css/vertical-centering/

You are mixing px with %. If you want to achieve that only by CSS, you need to use % for both widths:
.image {
width: 85%;
}
.image img {
width: 100%;
}
.info-panel {
position: fixed;
width: 15%;
height: 100%;
background-color: red;
right: 0px;
}
... otherwise, you have to use JS to calculate the current available width on the left side and assing it the .image div:
HTML
<div class="info-panel"></div>
<div class="image">
<img src="http://placehold.it/960x1400" />
</div>
CSS
.image {
min-height: 600px;
width: auto;
}
.image img {
width: 100%;
}
.info-panel {
position: fixed;
width: 200px;
height: 100%;
background-color: red;
right: 0px;
}
JS (jQuery)
$(document).ready(function() {
$('.image')
.css('min-height', 'auto')
.height($(window).height())
.width($(window).width() - $('.info-panel').width())
;
});