Highlighted

Div/Container question - gets messy on iPhone

New Here ,
Oct 22, 2019

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&rsquo;s Mines. <em>Haaretz.</em></a>
<p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>


</span>
<p class="fltrt">&nbsp;</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>



Views

56

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Div/Container question - gets messy on iPhone

New Here ,
Oct 22, 2019

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&rsquo;s Mines. <em>Haaretz.</em></a>
<p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>


</span>
<p class="fltrt">&nbsp;</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>



Views

57

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 22, 2019 0
Adobe Community Professional ,
Oct 22, 2019

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&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>

Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 22, 2019 0
New Here ,
Oct 22, 2019

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 22, 2019 0
New Here ,
Oct 30, 2019

Copy link to clipboard

Copied

Thanks Ben; it didn't solve the problem. Any other suggestions will be greatly appreciated.

Erez 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 30, 2019 0
Adobe Community Professional ,
Oct 22, 2019

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

 

clipboard_image_0.png

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 22, 2019 0
New Here ,
Oct 22, 2019

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

 

"

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 22, 2019 0
Adobe Community Professional ,
Oct 22, 2019

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

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 22, 2019 1