Copy link to clipboard
Copied
Hello,
I am having some difficulty in creating a nice div/container that will still be separted when viewed on the iPhone screen. Currently it is great on the PC (http://archaeology.tau.ac.il/ben-yosef/CTV/media/index.html), but not on the iphone (see screenshot attached). The relevant code is below.
Any help will be greatly appreicated!!
Thanks
Erez
<div class="container">
<div id="Woman"><span class="textcontainer">
<a href="https://www.haaretz.com/archaeology/.premium.MAGAZINE-archaeologists-find-pregnant-woman-buried-in-k..." id="Woman"> November 1, 2017. Archaeologists Startled to Find Remains of Pregnant Woman Buried in King Solomon’s Mines. <em>Haaretz.</em></a>
<p> </p>
<a href="http://www.jpost.com/Israel-News/Archaeologists-discover-rare-remains-of-pregnant-woman-in-King-Solo..."> October 31, 2017. Archaeologists Discover Rare Remains of Pregnant Woman in King Solomon's Mines. <em>The Jerusalem Post</em>. </a>
<p> </p>
<a href="http://www.dailymail.co.uk/sciencetech/article-5043879/Remains-pregnant-woman-King-Solomon-s-Mines.h..."> November 2, 2017. Mystery as 3,200-year-old remains of a pregnant 'singer' in her 20s buried alongside ornate beads is found near King Solomon's mines.<em> Mail Online</em>. </a>
<p> </p>
<a href="https://www.livescience.com/60839-skeleton-pregnant-woman-king-solomon-mines.html"> November 1, 2017. Rare Find at King Solomon's Mines: Ancient Pregnant Woman's Remains. <em>Live Science.</em></a>
<p> </p>
<a href="https://www.realmofhistory.com/2017/11/02/remains-pregnant-woman-timna-valley-mines/"> November 2, 2017. Archaeologists Come Across The Rare Remains Of A Pregnant Egyptian Woman At The Timna Valley Mines. <em>Realms of History.</em></a>
<p> </p>
<a href="http://www.newsweek.com/archaeology-ancient-egypt-pregnant-woman-singer-699298"> November 2, 2017. Ancient Egyptian Tomb of Pregnant Singer Discovered at Temple of Goddess Near King Solomon's Mines. <em>Newsweek</em>. </a>
<p> </p>
</span>
<p class="fltrt"> </p>
<div class="photoframe" id="frame3">
<p><a href="http://www.jpost.com/Israel-News/Archaeologists-discover-rare-remains-of-pregnant-woman-in-King-Solo... src="6.JPG" alt="gatehouse" width="325" height="325" hspace="15" /></a></p>
<h2><a href="http://www.jpost.com/Israel-News/Archaeologists-discover-rare-remains-of-pregnant-woman-in-King-Solo... Role <br />2017</a></h2>
</div>
</div></div>
Copy link to clipboard
Copied
Copy and paste the following into a new document.
<!doctype html>
<html><head>
<base href="/aa/">
<meta name="ac:base" content="/aa">
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
html {
min-height: 100%;
margin-left: calc(100vw - 100%);
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1 0 auto;
}
</style>
<script src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js"></script>
</head>
<body>
<header class="bg-light">
<div class="container">
<div class="row">
<div class="col">
<img class="img-fluid w-100" src="https://archaeology.tau.ac.il/ben-yosef/CTV/CTV_Web_Figures/348C5416-rd-banner1.jpg" alt="Header Image">
</div>
</div>
</div>
</header>
<nav>
<div class="container">
<div class="row mt-4">
<div class="col">
<h3>Timna Archive | TV Productions | King Solomon's Legacy? | The Domesticated Camel | Metal Workers | Textile | Fortifications (David?) | Early Dyeing | Women's Role | Edom's Tech | Nomadic Error</h3>
</div>
</div>
</div>
</nav>
<main class="mt-4">
<div class="container">
<!-- Repeat for further entries -->
<div class="row">
<div class="col-12 col-md-6">
<img src="https://archaeology.tau.ac.il/ben-yosef/CTV/media/6.JPG" alt="Women's Role 2017" class="img-fluid w-100">
<h3 class="text-center">Women's Role 2017</h3>
</div>
<div class="col-12 col-md-5">
<p>November 1, 2017. Archaeologists Startled to Find Remains of Pregnant Woman Buried in King Solomon’s Mines. Haaretz.</p>
<p>November 2, 2017. Mystery as 3,200-year-old remains of a pregnant 'singer' in her 20s buried alongside ornate beads is found near King Solomon's mines. Mail Online.</p>
<p>November 1, 2017. Rare Find at King Solomon's Mines: Ancient Pregnant Woman's Remains. Live Science.</p>
<p>November 2, 2017. Archaeologists Come Across The Rare Remains Of A Pregnant Egyptian Woman At The Timna Valley Mines. Realms of History.</p>
<p wappler-command="editContent">November 2, 2017. Ancient Egyptian Tomb of Pregnant Singer Discovered at Temple of Goddess Near King Solomon's Mines. Newsweek.</p>
</div>
</div>
<!-- End Repeat -->
</div>
</main>
<footer>
<div class="container">
<div class="row bg-dark text-light">
<div class="col">
<p class="mt-md-2">Prof. Erez Ben-Yosef | Department of Archaeology and Ancient Near Eastern Cultures | Tel Aviv University, Tel Aviv, 69978 Israel | ebenyose@post.tau.ac.il | Tel. +972-3-6406055 | Fax +972-3-6406883 |</p>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body></html>
Copy link to clipboard
Copied
Thank you for this, but I'm not sure it's working properly. Is there a simple code for a break that forces content to below it to be displayed only after all featuers above it are displayed?
Thanks
Copy link to clipboard
Copied
Thanks Ben; it didn't solve the problem. Any other suggestions will be greatly appreciated.
Erez
Copy link to clipboard
Copied
Just thought you should know, the latest Firefox detects a security risk on your server. See screenshot. This appears to be caused by an invalid intermediate on your SSL certificate bundle.. In addition, you have blocked mixed content (HTTP over an HTTPS server) as described in this Why No Padlock report..
https://www.whynopadlock.com/results/d8da82fb‑8129‑4cf5‑afb7‑6989f3a03557
Copy link to clipboard
Copied
Thanks! I am working on fixing this issue (my university - which manages the server - apparantly charges for including the certificate...). Regarding the blocked mixed content I'm not sure I fully understand what it means. your link leads to "
The requested page does not exist".
"
Copy link to clipboard
Copied
A site with HTTPS protocol cannot have assets on an HTTP server. The non-secure assets will be blocked by most browsers for security reasons. Scripts will fail to work. Images will fail to load, etc... Try this link.
https://www.whynopadlock.com/results/d8da82fb-8129-4cf5-afb7-6989f3a03557