Language selection div in wrong place in smartphone viewing size

[hariskar]

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 January 17, 2021 by hariskar

[shaili_shah]

Hi.

Didi you use the media query for that? If yes then use below code for less than 1000px browser width:

.lang {

float: right;

margin: -79% 4px 55px 0;

}

Hope it helps.

[hariskar]

Than you for reply!

With above code added screen width 964px it is at the correct position. But as the screen width gets smaller it moves down.

[dsonesuk]

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 January 23, 2021 by dsonesuk
missed open comment code for lang

[hariskar]

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 January 23, 2021 by hariskar