• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Div/Container question - gets messy on iPhone

Community Beginner ,
Oct 22, 2019 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

264

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
community guidelines
Community Expert ,
Oct 22, 2019 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>
Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Community Beginner ,
Oct 22, 2019 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

Votes

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
community guidelines
Community Beginner ,
Oct 30, 2019 Oct 30, 2019

Copy link to clipboard

Copied

LATEST

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

Erez 

Votes

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
community guidelines
Community Expert ,
Oct 22, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Beginner ,
Oct 22, 2019 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".

 

"

 

Votes

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
community guidelines
Community Expert ,
Oct 22, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines