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

peterpumkineaterrOP•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

peterpumkineaterrOP•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

peterpumkineaterrOP•2y ago

i gave it <p>

Unknown User•2y ago

Message Not Public

peterpumkineaterrOP•2y ago

what else i can do ?

peterpumkineaterrOP•2y ago

peterpumkineaterrOP•2y ago

it is like this now

Unknown User•2y ago

Message Not Public

peterpumkineaterrOP•2y ago

margins to p?

Unknown User•2y ago

Message Not Public

peterpumkineaterrOP•2y ago

who to make it center ? really ? how ?

Unknown User•2y ago

Message Not Public

peterpumkineaterrOP•2y ago

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

Unknown User•2y ago

Message Not Public

peterpumkineaterrOP•2y ago

wait

Unknown User•2y ago

Message Not Public

peterpumkineaterrOP•2y ago

i got one iframe link

peterpumkineaterrOP•2y ago

got this

peterpumkineaterrOP•2y ago

does this work perfectly ?

Unknown User•2y ago

Message Not Public

peterpumkineaterrOP•2y ago

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

Unknown User•2y ago

Message Not Public

peterpumkineaterrOP•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

peterpumkineaterrOP•2y ago

it's like this

peterpumkineaterrOP•2y ago

how can i make it proper paragraph

Mannix•2y ago

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

Mannix

CodePen

oNMXYEp

...

peterpumkineaterrOP•2y ago

what bout the paragraph

Mannix•2y ago

what do you mean ?

peterpumkineaterrOP•2y ago

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

Mannix

CodePen

oNMXYEp

...

peterpumkineaterrOP•2y ago

can you see the change did you checked ?

Mannix•2y ago

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

peterpumkineaterrOP•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

peterpumkineaterrOP•2y ago

The new issue