text alignment problem

i have this design but the problem is text is not aligning properly

45 Replies

Unknown User•2y ago

Message Not Public

Jochem•2y ago

you'll have to be more specific to what you want the text to align to, and also provide the code, preferably in a codepen. You should check #How To Ask Good Questions

peterpumkineaterr•2y ago

that's adobe xd prototype that's the end result let me share the html here

 <div class="container">
        <img src="/mask.jpg" alt="">
    </div>

    <div class="right">
        <div class="left">
            <p>
                Lorem Ipsum is

                simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry’s standard
                dummy text ever since the 1500s,

                when an unknown printer took a galley of type
                and scrambled it to make a type specimen book.
                It has survived not only five

                centuries, but also the leap into electronic
                typesetting, remaining essentially unchanged.
                It was popularised in the 1960s with the release
                of Letraset sheets containing Lorem Ipsum passages,

                and more recently with desktop publishing software like
                Aldus PageMaker including versions of

                -Lorem Ipsum.
            </p>
        </div>
    </div>

 <div class="container">
        <img src="/mask.jpg" alt="">
    </div>

    <div class="right">
        <div class="left">
            <p>
                Lorem Ipsum is

                simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry’s standard
                dummy text ever since the 1500s,

                when an unknown printer took a galley of type
                and scrambled it to make a type specimen book.
                It has survived not only five

                centuries, but also the leap into electronic
                typesetting, remaining essentially unchanged.
                It was popularised in the 1960s with the release
                of Letraset sheets containing Lorem Ipsum passages,

                and more recently with desktop publishing software like
                Aldus PageMaker including versions of

                -Lorem Ipsum.
            </p>
        </div>
    </div>

i want paragraph to be shown on website same as i made it in ui

Unknown User•2y ago

Message Not Public

peterpumkineaterr•2y ago

* {
    margin: 0%;
    padding: 0%;
}

body {
    background: rgb(233, 236, 239);
}

p {
    font-size: 1.5rem;
    position: fixed;
}

img {
    float: right;
    text-align: left;
    height: 100vh;
}

* {
    margin: 0%;
    padding: 0%;
}

body {
    background: rgb(233, 236, 239);
}

p {
    font-size: 1.5rem;
    position: fixed;
}

img {
    float: right;
    text-align: left;
    height: 100vh;
}

css

Unknown User•2y ago

Message Not Public

peterpumkineaterr•2y ago

i gave it <p>

Unknown User•2y ago

Message Not Public

peterpumkineaterr•2y ago

what else i can do ?

peterpumkineaterr•2y ago

peterpumkineaterr•2y ago

it is like this now

Unknown User•2y ago

Message Not Public

peterpumkineaterr•2y ago

margins to p?

Unknown User•2y ago

Message Not Public

peterpumkineaterr•2y ago

who to make it center ? really ? how ?

Unknown User•2y ago

Message Not Public

peterpumkineaterr•2y ago

i'm in mac can you tell me where i can see it?

Unknown User•2y ago

Message Not Public

peterpumkineaterr•2y ago

wait

Unknown User•2y ago

Message Not Public

peterpumkineaterr•2y ago

i got one iframe link

peterpumkineaterr•2y ago

got this

peterpumkineaterr•2y ago

does this work perfectly ?

Unknown User•2y ago

Message Not Public

peterpumkineaterr•2y ago

what size unit is best for text ? rem or em ?

Unknown User•2y ago

Message Not Public

peterpumkineaterr•2y ago

for now i'm not worried cause that's the single page my website will have

Unknown User•2y ago

Message Not Public

peterpumkineaterr•2y ago

it's like this

peterpumkineaterr•2y ago

how can i make it proper paragraph

Mannix•2y ago

https://codepen.io/MannixMD/pen/oNMXYEp

Mannix

CodePen

oNMXYEp

...

peterpumkineaterr•2y ago

what bout the paragraph

Mannix•2y ago

what do you mean ?

peterpumkineaterr•2y ago

https://codepen.io/MannixMD/pen/oNMXYEp

Mannix

CodePen

oNMXYEp

...

peterpumkineaterr•2y ago

can you see the change did you checked ?

Mannix•2y ago

you can't edit my codepen you need to fork it 😉

peterpumkineaterr•2y ago

ohh i did this

<div class="container">
    
        <div class="left">
            <p>
                Lorem Ipsum is

                simply dummy text of the printing and typesetting industry.<br>
                Lorem Ipsum has been the industry’s standard<br>
                dummy text ever since the 1500s,
<br>
                when an unknown printer took a galley of type<br>
                and scrambled it to make a type specimen book.<br>
                It has survived not only five
<br>
                centuries, but also the leap into electronic<br>
                typesetting, remaining essentially unchanged.<br>
              <br>
                It was popularised in the 1960s with the release<br>
                of Letraset sheets containing Lorem Ipsum passages,<br>
<br>
                and more recently with desktop publishing software like<br>
                Aldus PageMaker including versions of<br>
<br>
            <br>    -Lorem Ipsum.
            </p>
        </div>
    
<div class="right">
      <img src="https://unsplash.it/500" alt="">
  </div>
    </div>

<div class="container">
    
        <div class="left">
            <p>
                Lorem Ipsum is

                simply dummy text of the printing and typesetting industry.<br>
                Lorem Ipsum has been the industry’s standard<br>
                dummy text ever since the 1500s,
<br>
                when an unknown printer took a galley of type<br>
                and scrambled it to make a type specimen book.<br>
                It has survived not only five
<br>
                centuries, but also the leap into electronic<br>
                typesetting, remaining essentially unchanged.<br>
              <br>
                It was popularised in the 1960s with the release<br>
                of Letraset sheets containing Lorem Ipsum passages,<br>
<br>
                and more recently with desktop publishing software like<br>
                Aldus PageMaker including versions of<br>
<br>
            <br>    -Lorem Ipsum.
            </p>
        </div>
    
<div class="right">
      <img src="https://unsplash.it/500" alt="">
  </div>
    </div>

Mannix•2y ago

you can check the codepen now your p should be a heading and a p element 🙂 you could also instead of using br put all those text blocks in their own p elements

peterpumkineaterr•2y ago

The new issue