Image and text next to each other Classic Theme

[Khaito]

Hello,

I'm making my firs steps in Ps, tried googling and browsing tutorials, but probably my problem is on so basic lvl that there is no answer waiting.

I try to make extra cms page where I would insert "our mission" story with some photo.

some temporary content for test purposes only:

<div class="col-md-6"><img class="img-fluid" src="https://mtdata.ru/u7/photo53A0/20946911428-0/original.jpg#20946911428" alt="original.jpg#20946911428" width="400" /></div>

<div class="col-md-6">
<h2>Why Do Cats Like Boxes?</h2>
<p>"Cats like boxes because they are cryptic animals; they like to hide," Stephen Zawistowski, science adviser for the American Society for the Prevention of Cruelty to Animals, told Business Insider. "And a box gives them a place of safety and security."</p>
</div>

if I use above code, I do get the result - image is on the left, text on the right, changing browser window size makes the elements go one under other and photo does resize.

 

My problem is that white background of text isn't stretching to cover text when there is enough space to display 2 columns. Attached ss;

link to my test page

 

[razaro]

Hi and welcome to the forum.

When using bootstrap grid with columns you should wrap it in div with class  row

<div class="row">
   <div class="col-md-6">
 	<img class="img-fluid" src="https://mtdata.ru/u7/photo53A0/20946911428-0/original.jpg#20946911428" alt="original.jpg#20946911428" width="400">
   </div>
   <div class="col-md-6">
	<h2>Why Do Cats Like Boxes?</h2>
	<p>"Cats like boxes because they are cryptic animals; they like to hide," Stephen Zawistowski, science adviser for the American Society for the Prevention 		of Cruelty to Animals, told Business Insider. "And a box gives them a place of safety and security."</p>
	<p>While inside a box, cats feel that they cannot be snuck up on from behind or the side — anything that wants to approach them must come directly into 	their field of vision. In effect, such hiding spaces allow them to watch the world around them without being seen.</p>
  </div>
</div>

 

That should make white background all around content.

[Khaito]

Thank you! It's working perfectly, I do get white background around all the content.

 

Thank you also for naming what is "that I am using", now I can read more about it.

 

 

 

Edited November 23, 2019 by Khaito
At first I wasn't getting expected results, but later I figured out there was a typo in code:dic instead of div, and after fixing it the solution worked perfectly. (see edit history)

[razaro]

Glad it works, sorry for typo.

 

Best of luck in  developing and selling.