Boostrap 3的“普通” CSS

Question

I am new to the responsive world and am using a template that is using bootstrap.

I have the following CSS that I would like to make responsive but I am unsure of the best way to go about it.

I have modified the following theme

I am wanting to move the Onesie title to the top of the page - I have shifted that code into the #siteTitleBox

In the gap to the left of the theme I have created a new div called #text this will show data of a random post etc

I have the location of what I want correct but I just now need help to develop it into Responsive Code.

CSS:

#siteTitleBox
{
margin: -580px 0 0 0;
height:150px !important;
}
#text{
margin:-568px 0 0 -135px;
width:530px;
height: 100% !important;  
border:1px solid transparent;  
color: #ffffff;
background-color: rgba( 0, 0, 0, .4 );
border-color: rgba( 255, 255, 255, .9 ); 
}
#text p{
margin: -65px 5px 0 5px;
}
#text h3{
 margin:0 0 0 5px;
}
#siteTitleBox h1 a:hover{
color:#fff;
}

HTML:

<div id="siteTitleBox">Page Title</div>
<div id="text"><p>ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC ABC </p>

Answer 1

if u want use best way in responsive.don't use pixel base width,size.use % based

width:50%

still you want use pixel based declaration then use different media queries in css or in html like

css

@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
 #text{
width:30px;} 
}`
@media screen and (device-width: 450px) and (device-height: 100px) and (orientation:portrait){
 #text{
width:320px;} 
}`

html

<link rel="stylesheet" media="(max-width: 450px)" href="phone.css" />
<link rel="stylesheet" media="(max-width: 760px)" href="tablet.css" />