Responsive CSS Text

Question

I've been trying for more than 24 hours to do something extremely easy, or I believe its easy. I'm not a programmer however I need to do this university and Ive tried looking for ways to make it work but it simply refuse to work.

I need to write a kanji character on the left, 3 kanjis character on the right aligned with the one on the left and responsive as well, if I increase the font size everything gets messed up and 4 small paragraphs aligned with the stuff above.

body {
  background-color: burlywood;
  font-weight: 400;
  color: #333;
  padding: 1em;
  margin: 0;
}

#test {
  float: left;
  display: block;
  font-size: 50px;
  margin-right: 30px;
}

article {
  margin-top: 20px;
  margin-left: 20px;
}

#parag {
  display: block;
}

<p id="test">屋</p>

<article>
  <p>漢</p>
  <p>漢</p>
  <p>漢</p>
</article>

<div id="parag">
  <p>gds asdgsa asdkjasd askjdnaksd akjsd </p>
  <p>gds asdgsa djgsadjh</p>
  <p>gds asdgsa djgsadjh</p>
  <p>gds asdgsa djgsadjh</p>
</div>

What I get is this

for some reason the paragraph does not start at the begging of the page! Can someone PLEASE help me?

score 1 · Answer 1 · answered Mar 04 '20 at 09:21

1

Try this

body {
background-color: burlywood;
font-weight: 400;
color: #333;
padding: 1em;
margin: 0; }

  #test {
      float: left;
      display: block;
      font-size: 50px;
      margin-right: 30px;
}

  article {
    margin-top: 20px;
    margin-left: 20px;
  }

  #parag {
      clear:both;
      display: block;
  }

<p id="test">屋</p>

    <article>
        <p>漢</p>
        <p>漢</p>
        <p>漢</p>
    </article>

<div id="parag">
    <p>gds asdgsa asdkjasd askjdnaksd akjsd </p>
    <p>gds asdgsa djgsadjh</p>
    <p>gds asdgsa djgsadjh</p>
    <p>gds asdgsa djgsadjh</p>
</div>

you just need to add clear:both in #parag css

answered Mar 04 '20 at 09:21

Sushrut Singh Sisodiya

942
6
11

Wow thats amazing! It took me 24 hours to find that out and thanks to you! So simple and yet so... hard for a non-programmer! thanks a bunch once again! – Marcell Mar 04 '20 at 09:32
My pleasure please vote and also accept this answer if it solved you problem – Sushrut Singh Sisodiya Mar 04 '20 at 09:51

score 0 · Accepted Answer · answered Mar 04 '20 at 09:27

It will be better using flex to get your desired output; simply wrap your letters inside a div and remove the float element you have placed on it.

body {
background-color: burlywood;
font-weight: 400;
color: #333;
padding: 1em;
margin: 0; }

.kanji {
  display:flex;
  align-items:center;
}

 #test {
   font-size: 50px;
   margin-right:20px;
}

<div class="kanji">
  <p id="test">屋</p>
  <article>
    <p>漢</p>
    <p>漢</p>
    <p>漢</p>
  </article>
</div>


<div id="parag">
    <p>gds asdgsa asdkjasd askjdnaksd akjsd </p>
    <p>gds asdgsa djgsadjh</p>
    <p>gds asdgsa djgsadjh</p>
    <p>gds asdgsa djgsadjh</p>
</div>

WOW! I didnt even know about this Flex display! that sounds much more professional! amazing, thanks a bunch — Marcell, Mar 04 '20 at 10:00

Responsive CSS Text

2 Answers2