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

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 (1104 Views)

1 Reply

Css:how To Make Height Of The Section Tag Automatic With Different Screen Sizes by teampregar(op): 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

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

Populate 3 Drop Down Menu Using 3 Different Tables • Review A Nairalander's Mobile App - Events Meter • How Can One Buy Things Online With ATM