Jump to content
Khaito

Image and text next to each other Classic Theme

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 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)
  • Thanks 1

Share this post


Link to post
Share on other sites

Glad it works, sorry for typo.

 

Best of luck in  developing and selling.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More