Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,150,441 members, 7,808,578 topics. Date: Thursday, 25 April 2024 at 01:40 PM

Css:how To Make Height Of The Section Tag Automatic With Different Screen Sizes - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Css:how To Make Height Of The Section Tag Automatic With Different Screen Sizes (990 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:
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


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)

Take An Online Professional Course @ A Cheap Price Now / Thomson Reuters African Startups Challenge Is On / A Frontend/interface Developer Needed For Immediate Employment

(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. 16
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.