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");


});

could you please be more specific? did you use any media-queries? — Vivekraj K R, Feb 23 '16 at 05:12
If you give position,"absolute" with left",1000px, obviously there will be more space, try to use css for styling a page instead js — G.L.P, Feb 23 '16 at 05:16
actually i am using js so that I could make it fit on every screen dynamically.Sorry but I am a beginner to it — diksha agrawal, Feb 23 '16 at 05:20
You can make dynamic screens using CSS. In your screen instead of hard coded pixel ('px') for width try using %. — Savaratkar, Feb 23 '16 at 05:23
Maybe this will help http://stackoverflow.com/questions/1097006/removing-whitespace-between-html-elements-when-using-line-breaks — , Feb 23 '16 at 05:29
You can simplify your code immensely by using `.css({})` The curly brackets may contain multiple CSS rules. e.g. `$("#header").css({background-color: "#009acd", height: b, width: a, position: "relative"});` — Daniel Cheung, Feb 23 '16 at 05:46

Altenrion · Answer 1 · 2016-02-23T06:12:25.480

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.

score -1 · Answer 2 · answered Feb 23 '16 at 05:54

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.

How to Remove White Space

2 Answers2