hariskar 0 Posted January 17 Report Share Posted January 17 (edited) 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 by hariskar Quote Link to post Share on other sites
shaili_shah 4 Posted January 22 Report Share Posted January 22 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. 1 Quote Link to post Share on other sites
hariskar 0 Posted January 22 Author Report Share Posted January 22 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. Quote Link to post Share on other sites
dsonesuk 925 Posted January 23 Report Share Posted January 23 (edited) 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 by dsonesuk missed open comment code for lang 1 Quote Link to post Share on other sites
hariskar 0 Posted January 23 Author Report Share Posted January 23 (edited) 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 by hariskar Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.