Can anyone explain why my iframes with slideshare player won't go fullscreen on mobile when for instance iframes with youtube embeds will?
It's driving me nuts. Reading up on fullscreen APIs support, but don't have the chops to fully comprehend and it may just be my implementation. It seems to want to go fullscreen, but stays within parent div.
It's working just fine on tablet and desktop.
Page with both types of iframes: https://scanfoam.org/testing
Code below is what I use to embed in a gutenberg custom html block
<div style="border: solid 3px #2872fa;">
<div style="width: 100%; height: 0; position: relative; padding-bottom: calc(56.25% + 50px);">
<iframe
id="myslides"
style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; border: 0;"
src="https://www.slideshare.net/slideshow/embed_code/key/eYmvLMFV0SOoy0"
scrolling="no"
allowfullscreen="allowfullscreen">
</iframe>
</div>
</div>
Related
I'm fairly new to React/Gatsby and have just tweaked a template to create the site www.flakyrecords.com.
I packaged the site using the Gatsby command gatsby build which creates the website in the public folder. I then copied all of the files and folders from this public directory to my hosting provider.
For the most part, it worked - however, as you can see, the images are extremely blurry. Is there something obvious I need to do here in order to publish the images as sharp/in focus?
Many thanks.
Your image paths are wrong.
gatsby-image creates a blur effect by adding a data-image while loads the image itself. In your case, it keeps the blur because it doesn't find the asset.
This is your output code:
<div class=" gatsby-image-wrapper" style="position: relative; overflow: hidden;"><div aria-hidden="true" style="width: 100%; padding-bottom: 116.959%;"></div><img aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAIAAACEf/j0AAAACXBIWXMAAAsTAAALEwEAmpwYAAADdElEQVQ4y52TWSivaxTGXzMlKcc8plDChQyhyDyHK1FEpkxlvECUKZJ5TkQUhVLKVC7IlKmMuaFIUorITDg//+/fPvvUOZ29z7p4e7/1rWetZz1rvcLFxaWxsfHk5OTy8vLp6enl5eXt7e3z8/Pr64vz/v7+9vb24uLi4OBgcXFxfHy8s7OzrKwsLi7Oy8tLmJqaOjg41NTUDA4Ozs/Pr6ysrK2tLS8vb2xscAFzdHTEfWFhYXZ2dnR0tKenp6CgwM/Pz9raWpiZmZFmbGzs8PDw7u6O4lTe3d2lQl9fX3JycmxsbFNTU3FxcVJSUmhoqLu7u76+voqKiqqqqnBycqqqqtrZ2Xl+fv6S2cPDQ3R0tBBCXV1dyCwlJWVkZIQw8AEBATo6OjgVFBSEo6Nje3v76enpx8fH+/s7YFhpa2t3dXX19/cXFhYaGRkpKiomJCS0traWlJTAxcLCQg728PCora0F/Pr6CpImjY2N6Zw7/DnBSPXz8vLa2tpyc3NdXV29vb0NDAwEJCsrKzc3NyXOkZGRUVFRXGCB8lz29va+44QICwsbGBigOJ2TwsTERPB7aWkpPT19f39/e3uboKKiIi7X19fStFAxNTUVv5qaGh01Nze7ubnxSS8CtpB0dnaenJyEP960tLSIiAi6ZUipMgsODpaY+/r6MgI0k4NXV1eHhobi4+Npu6OjA4bkBomf8WZkZFRUVPj7+7MOAKjR3d0dGBgoFywrK6uuro58kGxoaAgJCbm6ukL58/PziYmJ7OxsRMGTk5MDQFdXF4H+qsyEh4eH5+bmAJeXl5P17OwMMJ7e3l57e3vW8/HxMTw8HICVlVV+fj5E5GAwx8fHNzc3XGDLhJGXOxsWFBTk6ekJBbJoaGjAU0tLi4FLEsjBW1tb1KEsu85WIf709DQ6+fj4MM/6+noAktrKyspwxi8HswmlpaWkBEZ6lralpYV3RpCtrS1Nssl2dnZEg+TvHzKTxBc8HT09PbIS9y2gEDY2NjMzM+vr65mZmWw1b05JSUkKJoCCUti3TU1N8bBwaWpqysmI79dCcWkqqCAfjMwUZSYHw5ayUkqJGyfa8mINDQ0tLS3F301BZuIfja44Y2Ji2BCmyD7+oPOv9iOfdJqbmycmJlZXV39v/0+c/9sIpREkYAS/AfsZLyn8f8C/aH8CTv/RsiNYjf4AAAAASUVORK5CYII=" alt="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition-delay: 500ms;"><picture><source srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,
/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" sizes="(max-width: 657px) 100vw, 657px"><img sizes="(max-width: 657px) 100vw, 657px" srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,
/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" src="/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png" alt="Lyle Christine" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 500ms ease 0s;"></picture><noscript><picture><source srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,
/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" sizes="(max-width: 657px) 100vw, 657px" /><img loading="lazy" sizes="(max-width: 657px) 100vw, 657px" srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,
/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" src="/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png" alt="Lyle Christine" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div>
If you try to look for https://www.flakyrecords.com/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png it will throw a 404 error.
I would like to present desktop users with a phone image and overlay an iframe that displays an external website to fit the phone screen. Both should be responsive.
If possible, When the visitor is already on a mobile phone then they should see the the same thing that is seen on the desktop, but without the phone as a frame.
Does anyone know how this can be done?
Here is the method that I use for responsive stacked divs.
This will work for both methods you asked for, but I would suggest not loading a desktop version to the mobile users, for bandwidth purposes being they have no option to prevent the content to load.
It is based on percentages and from my experience, it has the best responsive results, with minimal coding. Once you replace the photo, you will need to adjust the width and height percentage values in the CSS to scale as desired.
The Markup
<div id="container">
<div id="photo">
<img src="https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-6-6s-6-plus-6s-plus-1.png" width="100%" height="auto">
<div id="site">
<iframe src="https://www.godaddy.com/" width="99%" height="99%"></iframe>
</div>
</div>
</div>
The CSS
#container {
position: relative;
width: 100%;
max-width: 600px;
height: auto;
}
#photo {
position: absolute;
width: 100%;
}
#site {
position: absolute;
width: 100%;
max-width: 43%;
height: 76%;
top: 11.75%;
left: 28.25%;
border: none;
}
JsFiddle Demo Link
I have a web application in which the administrators can load any kind of images which will be shown in the site.
The issue is that the images have different size and dimentions... But the idea is that the user that visit the site can see all the images in a similar size.
What do you suggest? And how?
The front end is in angularjs and the backend in java with sprint.
Is good to set an specific size? or maybe and specific height and that the width ajust it to the image dimention?
Try this:
.img {
position: relative;
float: left;
width: 100px;
height: 100px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
<div class="img" style="background-mage:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-mage:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-mage:url('http://i.imgur.com/B1MCOtx.jpg');"></div>
I'm trying to build an "off canvas menu" like that on www.bikepacking.com,
but I'm struggling with using this in a container.
I use Bootstrap with QuantumUI and without jQuery.
My approach is something like this:
<div class="container wrapper">
<rw-navigation>
</rw-navigation>
<div class="brandbar">
<input type="checkbox" id="nav-trigger" class="nav-trigger"/>
<label for="nav-trigger"></label>
</div>
<div class="content">
<header>
</header>
<div ui-view=""></div>
<footer>
<p>© 2015 {{'footer.copyright' | translate}}</p>
</footer>
</div>
</div>
With some styles like this:
div.container.wrapper{
position: relative;
overflow: hidden;
.navigation{
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: 0;
width: 256px;
#include transition(left, 0.5s, ease);
background: #111;
color: white;
}
.brandbar{
position:absolute;
top: 50px;
left:0;
#include transition(left, 0.5s, ease);
}
.content {
overflow: hidden;
position: relative;
width: auto;
bottom: 100%;
left: 0;
}
}
The .navigation class is applied in the template of the rwNavigation directive with replace: true.
It doesn't work and I don't know why.
OK,
Now I got some tima at work for that problem.
THX# Sitepoint for this tutorial which gave me the right direction:
http://www.sitepoint.com/pure-css-off-screen-navigation-menu/
BUt I had to change form position:fixed to position:absolute, because position:fixed only refer to the window and position:absolute refer to prant position:relative element (or windows if there isnt a parent postion:relative element)
And here is a plnkr with the solution for a boxed off canvas menu
http://plnkr.co/edit/OdkXXkhGzKLd0qi2RZ4h?p=preview
Okay so simply I have this layout consisting of two elements, a navigation ("left") and the actual site content ("right").
Now what I want is that the "left" div just stays like it is, but when downsizing the screen to a certain size, I would like the content div's width to decrease with it.
However, I have no idea on how to start. When I look up responsive web design I can only find skeletons for entire layouts with loads of divs and percentages but I just want this for one div only and I'm totally confused.
This is what I have right now:
.right {
width: 750px;
margin: 40px 0 40px 50px;
float: left;
position: relative;
}
.left {
margin: 40px 0px 40px 40px;
width: 210px;
float: left;
position: relative;
}
Hopefully this http://jsbin.com/uquzaw/1/ isn't too overwhelming.
Essentially, you need percentages in your css and a meta tag in your html to get the effect you are looking for.
What you're asking for isn't exactly responsive design. If I understand you correctly, you are going to need percentage widths.
HTML:
<div id="left">
Nav1 <br>
Nav2 <br>
Nav3 <br>
Nav4 <br>
</div>
<div id="right">
This is where the main content will go.
</div>
CSS:
body { margin: 0; padding: 0; }
#left {
width: 20%;
height: 100%;
background: red;
float: left;
text-align: center;
}
#right {
width: 80%;
height: 100%;
background: blue;
float: left;
text-align: center;
}