When I use the Instagram embed code, it works for single images just fine. But with albums it gets a wrong height:
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> "Bringen my baby home for christmas" . Kære Weber Julemand #weber.danmark 🎅 💫 Vi har bagt en lækker og meget sprød julepizza til dig med vores ynglings Weber Grill. 💫 Velbekomme 🍕 . . #WeberWinterGriller #weberDK #webergrill #weber #home #mydaughter #chrismas #denmark #danmark #love #sunset #grill #aarhus #instagood #food #foodlover #pizza #foodporn #santa #jul #winter #vinter #nofilter #pictureoftheday</p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Ein Beitrag geteilt von Familie Adamsen (#familie_adamsen) am <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-11-30T17:40:24+00:00">30. Nov 2017 um 9:40 Uhr</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
Which is just copied from the embed dialogue. See the codepen for an example:
https://codepen.io/riedemann/full/e5393d7d77c3e5d5bf9ddb5a065ccd5b/
I have determined that the issue only happens when the person viewing the embed is logged in to Instagram. It's entirely Instagram's fault. Not much can be done about it.
Related
When this below code is used in HTML and opened using a browser, the flexbox effects are what I want. But when I use the same code in QWeb, the output is different (the flex div is not divided into two sections).
<div style="display: flex;">
<div style="border: 1px solid #ccc; flex: 1;">
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
</div>
<div style="border: 1px solid #ccc; flex: 1;">
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
</div>
</div>
Browser
PDF Report
The problem is not qweb but wkhtmltopdf. You can try webkit-box as mentioned in Using Flex/CSS with wkhtmltopdf
<div style="display: flex; display: -webkit-box; -webkit-box-pack: center; justify-content: center;">
<div style="border: 1px solid #ccc; flex: 1; -webkit-box-flex: 1; -webkit-flex: 1;">
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
</div>
<div style="border: 1px solid #ccc; flex: 1; -webkit-box-flex: 1; -webkit-flex: 1; margin-right: 0;">
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
</div>
</div>
I have a website I am creating for a school project. I am very new to html and css. I have created div containers for the different sections of my pages. On my index page, I have 5 containers including the header and footer.
The containers are working everywhere except in 1 location where I am floating images. For some reason, the box is shrink-wrapping under the 3 images. I thought by placing a position:relative in the .container css rule, it would behave like it is with paragraphs and other elements. I would like that container to surround the pictures just like it is with the other boxes on the index page.
Here is the html for that specific container that is not working:
<div class="container">
<article>
<h2>Meet the Staff:</h2>
<div class="gallery">
<figure class="staff"><img src="images/mary.jpg" alt="mary the librarian" />
<figcaption>Mary the Librarian</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/ruth.jpg" alt="mary the librarian" />
<figcaption>Ruth the Assistant</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="staff"><img src="images/esther.jpg" alt="mary the librarian" />
<figcaption>Esther the Research Librarian</figcaption>
</figure>
</div>
</article>
</div>
And here is the css:
.container {
width: 1000px;
height: auto;
margin: auto;
margin-bottom: 25px;
padding: 0 20px;
position: relative;
background: #fff;
box-shadow: 0 0 10px #b5b2ab;
}
figure img {
border: 1px solid #666;
background-color: #fff;
padding: 4px;
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
figcaption {
font: Arial, sans-serif;
text-align: center;
margin: 10px 0 0 0;
}
figure {
display: block;
float: left;
width: 240px;
margin: 0 25px 25px 25px;
}
Here is the so you can see what is happening: http://www.ta5zc.com/
Thanks for any help you can provide. I can't seem to figure out what is wrong.
Embarrassing, but I figured it out. The container is acting just like it is supposed to. There was no elements below the images, so there was nothing to stay in place. Therefore, when I floated the images, the box moved up the page like it was supposed to. Like I said, I'm new at this ;-)
I'm having two issues at once. One, with my new layout, it seems that when I zoom in enough, the x-scroll bar doesn't appear anymore (it used to before I went to the flex layout.) If I add "overflow: auto;" to the body style, then it will show up, but only if you scroll down to the very bottom, and that's not what I want.
Also, I tried a style where I could have the hover color go over the image instead of replacing it. (I used the after element.) It was working until I went to the flex layout.
(Also, is there a way to add scrolls to the other flex-item divs? I don't know what conditions will force the "overflow: auto;" to come into effect.)
[code]
<html>
<head>
<title> First Baptist Church of LaSalle </title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://firstbaptistchurchoflasalle.com/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="First Baptist Church of LaSalle" />
<meta property="og:description" content="The website of First Baptist Church of LaSalle" />
<meta property="og:image" content="http://sprbc.org/images/banner1.jpg" />
<link rel="icon" href="./churchImage.png">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<style>
.headerDiv
{
background-color: rgb(90, 7, 31);
width: 1000px;
height: 200px;
color: white;
}
body
{
background-color: beige;
//overflow: auto;
}
ul
{
height: auto;
width: 180px;
//background-color: #122213;
border-style: solid;
border-color: brown;
border-width: 10px;
list-style-type: none;
background-image:url(./greenFelt.jpg);
//border-image-source: url(./wood.jpg);
border-image-width: 10px;
border-image: url(./wood.jpg) 30 stretch;
margin: 0;
//float: left;
}
li
{
font-weight: bold;
font-style: italic;
width: auto;
// background-size: 100%;
text-align: center;
font-family: "Palatino Linotype", Serif;
position: relative;
background-image:url(./Crumpled_Paper_-_White.gif);
background-position:center;
background-repeat:no-repeat;
opacity: 1.0;
font-size: 12px;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 8px;
margin: 10px;
text-align: center;
background-size: 100% 100%;
}
li a
{
text-decoration: none;
color: black;
}
li a:hover:after
{
content:"\A";
//width:97%;
width: 92%;
height:88%;
background:rgba(143, 158, 208, 0.5);
position:absolute;
// top:0;
top: 2.5;
right: 0.0;
left: 2.0;
bottom: 0;
}
li:before
{
content: url(./pin.png);
display: block;
position: absolute;
left: 0px;
top: 0px;
}
li a:hover
{
//background-color: #2233dd;
// opacity: .9;
}
.flex-container {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: auto;
height: auto;
}
.flex-item {
width: auto;
height: auto;
margin: 2px;
}
#middle
{
font-family: "Palatino Linotype";
font-size: 14px;
font-style: italic;
}
#right
{
background-color: grey;
}
#container
{
overflow: auto;
}
</style>
<div style="width: 1000px; height: auto; margin: 0 auto;" id="container">
<div class="headerDiv"> <center><h1> First Baptist Church of LaSalle </h1></center>
</div>
<div style="margin: 0; width: 1000px; border: 1px solid blue; height: auto; background-color: tan;" class="flex-container">
<div class="flex-item w3-card-4">
<ul style="width: auto;">
<li> Home</li><br/>
<li> About Us</li><br/>
<li> Pastoral Staff </li><br/>
<li> Sunday School </li><br/>
<li> Services & Directions</li><br/>
<li> Calendar </li><br/>
<li> Activities </li><br/>
<li> Contact Us </li><br/>
<li> Sermons </li><br/>
<li> Weekly Bulletin </li><br/>
</ul>
</div>
<div class="flex-item" id="middle">
Dear Friends, <br><br/>
<p>Thank you for taking the time to visit our website for First Baptist Church of LaSalle. We invite you to take the time to look at the site and get to know a little bit about us. </p>
<p>First Baptist Church was started in 1839 and has been preaching the Word of God without compromise ever since. The church moved to its current location in 1976. </p>
<p>As pastor of the church, I have had the privilege of working with many wonderful people here at the church. God has blessed us with a great staff and many wonderful people in the congregation.</p>
<p>It is exciting to be here and to see what God is doing now and is going to do in the future. First Baptist Church is a church that cares about people and a place you can make home.</p>
<p>I would encourage you to come and see for yourself what God is doing here. My family and our church would love to see you.</p>
In Christ, <br></br>
Wesley Waddle, Pastor
</div>
<div class="flex-item w3-card-4" id="right">
<U>Contact Information </U><br></br>
<B> PHONE: </B> 815.223.1333 <br></br>
<B> FAX: </B> 815.223.1334 <br></br>
<br></br>
<B>ADDRESS: </B> 200 - 24th Street <br></br>
P. O. Box 1043 <br></br>
LaSalle, IL 61301 <br></br>
<br></br>
</div>
</div>
<footer style="background-color: gold; width: 1000px; height: 200px; margin: 0;">
<center> <div style="font-weight: bold;"> © 2017 - First Baptist Church of LaSalle </div> </center>
<center><div class="flex-container">
<div class="fb-like flex-item" data-href="https://www.facebook.com/First-Baptist-Church-of-LaSalle-106794612807864/" data-width="80" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus flex-item" data-action="share" data-width="150" data-href="http://firstbaptistchurchoflasalle.com/"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<div style="color: black;" class="flex-item">Tweet <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</div> </center>
</footer>
</div>
</body>
</html>
[/code]
For the hover problem, it's not lining up to fully fit the image. It's a big too tall on the sides at the top. (Originally, "Top: 0; Left: 1.8; Right: 0; Bottom: 0; height: 100%; width: 97%;" worked, but now it doesn't with the new layout.) (So I know there should be a way to do it with just one style for all the li elements instead of having to having varying styles for each li element.)
Also, now that I recall, after I added the flex item to contain the UL and added the flex item to the flex container, I had to change my background-size: 100%; to background-size: 100% 100%;
to get it to fit all the words on the image and not go outside the image.
As for the scrolls, for some reason, the only ones I can get to show up, other than using overflow: scroll; is overflow: auto; for body, and that only shows the x-scroll if you scroll to the very bottom. (Interestingly, the y-scroll seems to be working fine.) Applying overflow: auto; to #container doesn't appear to work.
Dear fellow stackoverflowers,
I'm having a peculiar problem I can't seem to find the solution for.
I'm trying to apply the width of the largest div to the smaller divs, so that they appear equal in width, through flexboxing. Unfortunately, all the solutions so far have been futile efforts. Do you have any idea why the different divs in the example I've linked to won't display the same width as the largest element? I know the boxes get their width from the content, but I just can't seem to make them behave the way I want.
HTML
<section id="contact" class="wrapper bgfixed">
<div>
<h1>Contact</h1>
<div id="contactholder">
<a href="#">
<div>
<h1 class="icon-mail"></h1>
<h2>EMAIL</h2>
<p>someonesprofessionalemail#gmail.com</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-old-phone"></h1>
<h2>TELEPHONE</h2>
<p>39 88 49 92 91</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-facebook2"></h1>
<h2>FACEBOOK</h2>
<p>www.facebooooooooooooooooooook.com/snowman</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-soundcloud"></h1>
<h2>LOREM IPSUM</h2>
<p>www.loremipsumyesyesyesblahblabhlabh.com</p>
</div>
</a>
</div>
</div>
</section>
CSS
a{text-decoration: none;}
#contact
{
width: 100%;
height: 82vh;
color: whitesmoke;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background: #34495e;
}
#contactholder
{
display: flex;
justify-content: space-between;
font-size: 80%;
}
#contactholder div
{
flex: 1;
flex-grow: 1;
font-size: 0.5rem;
}
#contactholder div h1
{
padding: 3rem;
letter-spacing: 0;
display: inline-block;
background-image: linear-gradient(white, 1%, #3498db);
border-radius: 100rem;
box-shadow: 0 1px 1px grey;
transition: 0.3s;
margin-bottom: -0.5rem;
}
#contactholder a:hover h1
{
background-image: linear-gradient(white, 1%, #00A4EB);
text-shadow: 0 1px 1px;
}
Hoping for some brilliant minds!
Best wishes,
Lodott1
I am trying to make bootstrap drop down menu full screen width and fluid, but it seems i can not do it :) I am trying to put the search field into drop down menu (search filed & search button have to be in the center of the submenu field).
HTML:
<ul class="nav pull-right">
<li class="dropdown">
Search</b>
<ul class="dropdown-menu" id="menu1">
<div class="search_field">
<form class="navbar-form pull-right">
<input type="text" class="span4" placeholder="Search">
<button type="submit" class="btn btn-search">Search</button>
</form>
</div>
</ul>
</li>
</ul>
CSS:
.dropdown-menu {
background-clip: padding-box;
background-color: #FFFFFF;
border: 0px !important;
border-radius: 0px !important;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
float: left;
list-style: none outside none;
margin: 0px;
min-width: 100%;
padding: 10px 100%;
margin: 0, -100%;
position: absolute;
top: 100%;
z-index: 1000;
}
}
.btn-search {
background-color: orange !important;
background-image: linear-gradient(to bottom, orange, #orange light) !important;
background-repeat: repeat-x !important;
padding: 10px 20px !important;
}