CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ashosborne1
ashosborne1

Reputation: 2934

White space tabs in bootstrap

I am trying to achieve a layout similar to the attached image. It looks fine and as how I want it when displayed in a browser, but when I test on a mobile/tablet device the spacing of the p tags ends up not correctly displayed- I assume this is due to me using hard coded widths in my span tags and the p tags taking up more than one line.

Is it possible to achieve the attached image layout in a responsive manner? If so how do I go about doing this?

I have tried using % and EM in place of px with similar results.

Desired layout

The HTML that I have written so far is:

         <h2>Lorem Ipsum </h2>  
    <p>
        <span style="display:inline-block; width: 50px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
    </p>
    <p>
        <span style="display:inline-block; width: 100px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
    </p>
    </br>
    <h4>
       <span style="display:inline-block; width: 200px;"></span>           
        or
    </h4>
    </br>
    <p>
        <span style="display:inline-block; width: 50px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat
    </p>
    <p>
        <span style="display:inline-block; width: 100px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
    </p>
    </br>

    <h2>
        <span style="display:inline-block; width: 550px;"></span>
        Lorem Ipsum
    </h2>
    <p>
        <span style="display:inline-block; width: 600px;"></span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur 
    </p>
    <p>     
    <span style="display:inline-block; width: 663px;"></span>
    Lorem Ipsum
    </p>
    <p>
        <span style="display:inline-block; width: 650px;"></span>
        Lorem ipsum dolor sit amet  
    </p>

Upvotes: 0

Views: 519

Answers (1)

connexo
connexo

Reputation: 56853

First of all, you better walk this way to achieve something similar to what you want:

.indent-1 {
  margin-left: 2.5%;
}
.indent-2 {
  margin-left: 5%;
}
.indent-3 {
  margin-left: 7.5%;
}
.indent-4 {
  margin-left: 10%;
}
.indent-5 {
  margin-left: 12.5%;
}
.indent-6 {
  margin-left: 15%;
}
.indent-7 {
  margin-left: 17.5%;
}
.indent-8 {
  margin-left: 20%;
}
.indent-9 {
  margin-left: 22.5%;
}
<h2>Lorem Ipsum </h2> 
<p class="indent-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<p class="indent-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<h4 class="indent-3">or</h4>
<p class="indent-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat</p>
<p class="indent-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<h2 class="indent-6">Lorem Ipsum</h2>
<p class="indent-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur</p>
<p class="indent-8">Lorem Ipsum</p>
<p class="indent-9">Lorem ipsum dolor sit amet</p>

CodePen using LESS: http://codepen.io/anon/pen/MweYma JSFiddle using CSS: https://jsfiddle.net/c80p3pyx/1/

If you need to make sure your paragraphs do not wrap, just add

p { white-space: nowrap; }

to your CSS. This way your paragraphs will always stay in one line, but lines that do not fit the screen width will cause the browser to show (or make available at least) a horizontal scrollbar, which in almost all cases you will want to avoid. The only other option on "too-long" paragraphs is to either shorten the text, or to use a smaller font.

Upvotes: 2

Related Questions