Jump to content

Language selection div in wrong place in smartphone viewing size


Recommended Posts

In my page https://www.mikroviologos.gr/ I made a simple language selection <div> which is in the correct place when page is viewed in desktop size. But when the page is viewed with smartphone the lang <div> goes under both menus (horizontal and vertical) and other blocks.

How could I make it be in the same place, under the header on the right side both in desktop and smartphone viewing size?

Thank you!

Edited by hariskar
Link to post
Share on other sites

You have got it the wrong order. the container should follow header,, .row should be child of container, then lang (col that is 100%) wide) should be child of .row. 

The container should be 100% width, not 82% as you have it, once that is done change .lang to 

.lang {
   /* float: right; */
    /* margin: -24px 5px 0 0; */
    text-align: right;
    display: block;
    margin: 0 25px;
}

.container {
    /* width: 82%; */
    margin: 0 auto;
    max-width: 1100px;
}
<div class="container">
<div class="row">

    <div class="lang"><a href="https://www.mikroviologos.gr/">GR</a>/<a href="https://www.mikroviologos.gr/en">EN</a></div>
<aside class="col-6">
<div id="block1">
<ul>
<li><a href="https://www.mikroviologos.gr/en/laboratory-structure">Laboratory Structure</a></li>
<li><a href="https://www.mikroviologos.gr/en/equipment">Equipment</a></li>
<li><a href="https://www.mikroviologos.gr/en/photos">Photos</a></li>
<li><a href="https://www.mikroviologos.gr/tmimata-exetaseis">Departments – examinations</a></li>
<li><a href="https://www.mikroviologos.gr/proliptikes-exetaseis">Preventive examinations</a></li>
<li><a href="https://www.mikroviologos.gr/politiki-poiotitas">Quality policy</a></li>
<li><a href="https://www.mikroviologos.gr/asfalistika-tameia">Social Security funds</a></li>
</ul>
</div><!--block1-->
<div id="block2"><h2>Blood sampling from children</h2><hr><p>Our laboratory has extensive experience in blood sampling from newborns, infants and older children and treats them with particular sensitivity</p></div>
<div id="block3"><h2>External quality control</h2><hr><p>Results: <a href="https://www.mikroviologos.gr/files/aimatologia.pdf" target="_blank">Hematology</a>, <a href="https://www.mikroviologos.gr/files/kliniki-himeia.pdf" target="_blank">Clinical Chemistry</a>, <a href="https://www.mikroviologos.gr/files/ormones-karkinikoi-deiktes.pdf" target="_blank">Hormones and Cancer Indexes</a></p></div>
<div id="block4"><h2>Job Vacancies</h2><hr><p>If you are interested in working at our laboratory, you could either bring us your C.V. or send it through our website’s <a href="https://www.mikroviologos.gr/en/contact-form">contact form</a> </p></div>
</aside>
<div id="content" class="col-12">

<img id="mc" src="https://s.mikroviologos.gr/image/microscope.jpg" alt="Microbiology Laboratory in Kavala, microbiologist Haris Karahristianidis" width="656" height="395"><p>The microbiology laboratory of Haris Karahristianidis, Biopathologist (Microbiologist) has been operating since the beginning of 2005 in Kavala, in the city center. Located at a key point, with easy access from the villages of our prefecture, as well as from other prefectures, we offer medical services with validity and accountability.</p>
<p>Our well-equipped laboratory with state-of-the-art analysers, combined with our specialised and highly trained personnel, guarantee reliability and security.</p>
<p>Consistency, support, professionalism and the human factor are the key elements of our laboratory's health services in order to meet your needs whenever it is necessary.</p>
<header class="rule"><h2 class="news">Latest news</h2></header>
<div class="newsrow">
<div class="floating-box"><span class="newsdate">November 26, 2018</span><br>Our laboratory was certified today according to the standards of ISO 9001: 2015 by TÜV Hellas<br></div>
<div class="floating-box"><span class="newsdate">July 28, 2017</span><br>Our laboratory equipment was supplemented with the bloodless transdermal neonatal bilirubin meter Dräger JM-105<br></div>
<div class="floating-box"><span class="newsdate">June 6, 2017</span><br>Doutsaridou Fotini’s diploma thesis titled  <a href="https://www.mikroviologos.gr/arthra/ilikia-kai-parametroi-spermatos">Age and Seed Parameters</a> was added to our website’s articles<br></div>
<div class="floating-box"><span class="newsdate">February 9, 2017</span><br>The Roche Cobas e 411 analyzer was added to our laboratory equipment, which is <a href="https://s.mikroviologos.gr/files/FMF_official_certificate-early_weeks.pdf" target="_blank">certified</a> by the <a href="https://fetalmedicine.org" target="_blank">FMF</a> for PAPP-A measurements and free-HCG in the first trimester of pregnancy. We will also increase the number of examinations we perform and reduce the delivery time of the results.<br>
<a href="/exoplismos#e411">More ...</a></div>
</div><!--content-->
<a href="/en">News archive</a>
</div><!--row-->
  </div><!--container-->
</div>

After that is done, the lang element being placed at top, will remain at top, whatever view, removing the 82% will make aside and #content fit within device area and not force #content to extend beyond right edge of screen.

Edited by dsonesuk
missed open comment code for lang
  • Like 1
Link to post
Share on other sites

Thank you for advises!

I corrected container, row order, removed container with 82% and did everything you suggested.

I changed margin-top of content.col-12 and aside.col-6 to compensate the space required by lang.

Shouldn't lang be aligned over right end of picture?

I consider to use media query with margin-right=53px for bigger screens and margin-right=18px for smaller.

Would you advise anything better?

Thank you again!

Edited by hariskar
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...