Div/Container question - gets messy on iPhone

Forum|Forum|6 years ago
October 22, 2019
2 replies
410 views

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-king-solomons-mines-1.5461823" 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-Solomons-Mines-510965"> 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.html"> 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-Solomons-Mines-510965"><img 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-Solomons-Mines-510965">Women's Role <br />2017</a></h2>
</div>
</div></div>

This topic has been closed for replies.

Nancy OShea

Community Expert

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

Nancy O'Shea— Product User & Community Expert

E

erezb34675683Author

Participant

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".

"

Nancy OShea

Community Expert

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

Nancy O'Shea— Product User & Community Expert

BenPleysier

Community Expert

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&nbsp;Archive | TV&nbsp;Productions | King&nbsp;Solomon's&nbsp;Legacy? | The&nbsp;Domesticated&nbsp;Camel | Metal&nbsp;Workers | Textile | Fortifications&nbsp;(David?) | Early&nbsp;Dyeing | Women's&nbsp;Role | Edom's&nbsp;Tech | Nomadic&nbsp;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>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

E

erezb34675683Author

Participant

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded