OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to place Paragraph on the right side of the photo?

  • Thread starter Thread starter Almas Iskak
  • Start date Start date
A

Almas Iskak

Guest
On this little project i can't place paragraph on the right of the photo properly. There is big a mount of space between them.

I used display:flex to place them horizontally. And width: 50% to make them get half of the screen, but there is still field in the center....

Can someone help with solving this ?

enter image description here


What should i get:
enter image description here


I tried changing width 33%, I've also tried adding padding and margin.


Code:
.center {
  display: flex;
  padding: 10px 10px;
  background-color: #c2e7f0;
  margin-top: 15px
}

.all {
  display: flex;
  padding: 20px;
}

.center img {
  width: 60%;
  float: left;
}

.text {
  width: 50%;
  font-weight: 100;
}

Code:
<div class="center">
  <div class="all">
    <div class="center_img">
      <img src="g1.png">
    </div>

    <div class="text">
      <h2>Khvicha Kvaratskhelia relishes ‘best day’ in Georgians’ lives</h2>
      <p>Georgia is the lowest-ranked team at this year’s European Championship and few gave the nation a chance of progressing out of the group stages in what is its debut appearance at a major tournament.</p>
      <p>But against all odds, the Crusaders produced a memorable performance to secure a deserved 2-0 Group F win against Portugal, thanks to a second-minute goal from Kvaratskhelia and a second-half penalty from Georges Mikautadze.</p>
      <p>The coach, a vital cog in manager Willy Sagnol’s team, said the squad had been “calm” ahead of the crunch tie and managed to execute the game plan to perfection.Webb, known for his ability to motivate players on a more personal level, said he had
        delivered a presentation before the tournament which focused on self belief.He said his speech drew on motivation from smaller nations, such as Wales and Iceland, which had punched above their weight at previous European Championships – Wales
        reached the semifinals and Iceland the quarterfinals at Euro 2016.</p>
    </div>
  </div>
</div>
<p>On this little project i can't place paragraph on the right of the photo properly. There is big a mount of space between them.</p>
<p>I used <code>display:flex</code> to place them horizontally. And <code>width: 50%</code> to make them get half of the screen, but there is still field in the center....</p>
<p>Can someone help with solving this ?</p>
<p><img src="https://i.sstatic.net/IxaGQVCW.png" alt="enter image description here" /></p>
<p>What should i get:
<img src="https://i.sstatic.net/V0ir2qat.png" alt="enter image description here" /></p>
<p>I tried changing <code>width 33%</code>, I've also tried adding padding and margin.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.center {
display: flex;
padding: 10px 10px;
background-color: #c2e7f0;
margin-top: 15px
}

.all {
display: flex;
padding: 20px;
}

.center img {
width: 60%;
float: left;
}

.text {
width: 50%;
font-weight: 100;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="center">
<div class="all">
<div class="center_img">
<img src="g1.png">
</div>

<div class="text">
<h2>Khvicha Kvaratskhelia relishes ‘best day’ in Georgians’ lives</h2>
<p>Georgia is the lowest-ranked team at this year’s European Championship and few gave the nation a chance of progressing out of the group stages in what is its debut appearance at a major tournament.</p>
<p>But against all odds, the Crusaders produced a memorable performance to secure a deserved 2-0 Group F win against Portugal, thanks to a second-minute goal from Kvaratskhelia and a second-half penalty from Georges Mikautadze.</p>
<p>The coach, a vital cog in manager Willy Sagnol’s team, said the squad had been “calm” ahead of the crunch tie and managed to execute the game plan to perfection.Webb, known for his ability to motivate players on a more personal level, said he had
delivered a presentation before the tournament which focused on self belief.He said his speech drew on motivation from smaller nations, such as Wales and Iceland, which had punched above their weight at previous European Championships – Wales
reached the semifinals and Iceland the quarterfinals at Euro 2016.</p>
</div>
</div>
</div></code></pre>
</div>
</div>
</p>
Continue reading...
 

Latest posts

S
Replies
0
Views
1
Safwan Aipuram
S
Top