How to Remove White Space

Question

I am designing a responsive web page. Actually what's happening is though i am setting the width of my header and wrapper with the screen size still I guess it is taking more space due to which a horizontal scroll bar appears down the screen and also the position of buttons are varying from display to display though i am taking the screen size px Here is the code

$(document).ready(function(){
    var a=window.screen.availWidth;
    var b=(0.20 * window.screen.availHeight);
    var c=(0.60 * window.screen.availHeight);
 $("#header").css("background-color","#009acd");
 $("#header").css("height",b);
 $("#header").css("width",a);
 $("#header").css("position","relative");

 $("#wrapper").css("background-color","#FFFFFF");
 $("#wrapper").css("width",a);
 $("#wrapper").css("height",c);
 $("#wrapper").css("position","relative");

 $("#logo1").css("position", "absolute");
 $('#logo1').css("top","5%");

 $('#d11').css("position","absolute");
 $('#d11').css("top","75px");
 $('#d11').css("left","310px");
 $('#d11').css("color","#FFFFFF");

 $('#marquee').css("position","absolute");
 $('#marquee').css("top","-15px");
 $('#marquee').css("left","300px");
 $('#marquee').css("color","#FFFFFF");

 $('h1').css("color","#FFFFFF");
 $('h3').css("position","absolute");
 $('h3').css("top","90px");
 $('h3').css("left","1000px");
 $('h3').css("color","#FFFFFF");
 $('h2').css("position","absolute");
 $('h2').css("top","60px");
 $('h2').css("left","1075px");
 $('h2').css("color","#FFFFFF");

/* $('#d12').css("position","absolute");
 $('#d12').css("top","65px");
 $('#d12').css("left","950px");
 $('#d12').css("color","#FFFFFF");*/

 $('#css3menu1').css("position", "absolute");
 $('#css3menu1').css("bottom","17px");
 $('#css3menu1').css("left","310px");

 $('#videos').css("position", "absolute");
 $('#videos').css("top","0px");
 $('#videos').css("left","22px");

 $('#studymaterial1').css("position", "absolute");
 $('#studymaterial1').css("top","148px");
 $('#studymaterial1').css("left","32px");

 $('#downloads').css("position", "absolute");
 $('#downloads').css("top","315px");
 $('#downloads').css("left","22px");

 $('#wowslider-container1').css("left","233px");
 $('#wowslider-container1').css("top","1000px");

 $('.formoid-solid-blue').css("position","absolute");
 $('.formoid-solid-blue').css("left","912px");
 $('.formoid-solid-blue').css("top","12px");


});

Answer 1

I would suggest you to use media queries , instead of js. Only if you are trying to make a support of a veeery old browsers, there is a tiny possibility, that js would be needed to make adoptive layout. For every modern browser, just use the media queries . Basic info you can read on the link : media queries

By the way, you can look at popular adoptive css frameworks, like bootstrap , foundation or or others. They provide more or less complete adoptivness from the box, and you can customize it for your needs.

Answer 2

Okay, there is a lot of stuff going on here. On a basic level, you can think of a web frontend as being divided between Content (HTML), Style (CSS), and Animation/Interaction (JavaScript). I'm oversimplifying a bit, as you can do animations in CSS, and JavaScript is becoming much more complex and important, but at a basic level this way of thinking works.

So in your HTML file, you should define the content of your page. Then link to a CSS file in which you define the styles and appearance.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

In your CSS, you can use media queries to define styles based on the size of the window, which will help you to create a responsive site. Media queries are the industry standard for responsive web.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

If your site gets a bit more complicated, you might want to look into using a front-end CSS framework, like Bootstrap or Foundation . These are both build from the ground up to support responsive web design and will abstract away a lot of the complexity therein.