Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,153,011 members, 7,817,978 topics. Date: Sunday, 05 May 2024 at 01:21 AM |
Nairaland Forum / Science/Technology / Programming / Css:how To Make Height Of The Section Tag Automatic With Different Screen Sizes (992 Views)
I Will Officially Quit Visiting This Section / Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql / How To Get The Dimensions (width And Height) Of An Image From The Image Url (2) (3) (4)
(1) (Reply)
Css:how To Make Height Of The Section Tag Automatic With Different Screen Sizes by teampregar(m): 7:25pm On May 27, 2016 |
Assuming i have this: //HTML <section> Hello World </section> //CSS code on a blackberry short screen phone section( height:50px ) How do i make the height to increase automatically incase someone with iphone 6 uses the website, so the section part will automatically fit the screen height of the iphone 6,pls how do i do this with CSS |
Re: Css:how To Make Height Of The Section Tag Automatic With Different Screen Sizes by Dmayor7(m): 11:03pm On May 27, 2016 |
teampregar: First you need to wrap your <head>, <content>, <sidebar>, and <footer> tag in a <div> Give your <content> a #con id. eg: <content id="#con"></content> Give your <sidebar> a #sid id. eg: <sidebar id="sid"></sidebar> Give your <header> a #head is. eg: <header id="#head"></header> Assuming your <div> wrapper width is 980px then:..... /*screens smaller than 980*/ @media screen and (max-width: 980px) { div { width: 95%; } #con { width: 60%; padding: 3% 4%; } #sid { width: 30%; } } /*screens smaller than 650*/ @media screen and (max-width: 650px) { #head { height:auto; } #con { width:auto; float: none; margin: 20px 0; } #sid { width:100%; margin:0; float: none; } } /*screens smaller than 560*/ @media screen and (max-width: 480px) { /* you need to disable webkit text size adjust (for iPhone) */ html { webkit-text-size-adjust: none; } } NOTE:... This code is advisable to add it in a seperate .css file and call it mediaqueris.css or something you can relate with, so that you can change the responsiveness of your site-wide anytime you want and hassle free. I also believe you might have floated your <content> to the left, and your <sidebar> to the right in your main .css file. |
(1) (Reply)
Thomson Reuters African Startups Challenge Is On / Who Can Develop A Credit Risk Evaluation Using Artificial Neural Network / FUNAAB Codeclass Hackathon
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 10 |