Customizing page - moving text to the right of the image

dipanjan94

I am currently setting up my workshop page which kinda looks like this - https://www.dipanjanpal.com/Workshop

However, I want the title and the description of the workshop (including the "learn more" button) to be on the right side of the image and not bottom.

I played around with the HTML code but couldn't do this - how can I achieve what I want?

Also, for reference, I want the final look to be something like this
!

Allen

Inside the widget put each section in separate DIV. Float one left and other float right.

Hikin' Mike

Use this instead:

HTML

<div class="container">

  <div class="image-wrap">
    <a href="https://www.dipanjanpal.com/Workshop/Introduction-to-Aerial-Photography">
      <img src="https://photos.smugmug.com/photos/i-BfdQ5PP/0/47bf0b49/L/i-BfdQ5PP-L.jpg">
    </a>
  </div>

  <div class="content-wrap">
    <h2><a href="https://www.dipanjanpal.com/Workshop/Introduction-to-Aerial-Photography" target="_self" style="color:black">Introduction to Aerial Photography </a></h2>
    <p>Three hours online workshop covering the basics of all things related to Aerial Photography.</p>
    <div class="button"><a href="https://www.dipanjanpal.com/Workshop/Introduction-to-Aerial-Photography" target="_self">Learn More</a></div>
  </div>

</div>

CSS

.container {
  display: flex;
  margin: 20px auto;
  width: 1000px;
}

.image-wrap {margin: 0 50px 0 0;}

img,
.image-wrap {
  width: 400px;
  max-width: 100%
}

h2 {
  font-size: 20px;
  letter-spacing: .2px;
}

p {
  font-size: 14px;
  letter-spacing: .5px;
  line-height: 1.4;
}

.button {margin: 35px auto 10px;}

.button a {
  padding: 17px 35px;
  background: rgba(100, 100, 100, .5);
  border: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

  .button a:hover {background: #000;}

@media ( max-width: 736px) {

  .container {
    display:block;
    text-align: center;
  }

  .button {margin: 15px auto 10px;}

  .button a {
      padding: 15px 20px;
      letter-spacing: 1px;
      font-size: 12px;
      font-weight: 400;
  }

  p {font-size: 17px;}

}

dipanjan94

Thank you Mike! It works well for my desktop, but there is some weird alignment happening for mobile version. Could you please help me out with that?

Hikin' Mike

Sorry, I forgot to add a width:auto; and a margin: 0 auto 20px in the @media ( max-width: 736px):

Use this instead.

@media ( max-width: 736px) {

  .container {
    display:block;
    text-align: center;
    width: auto;
  }

  .image-wrap {margin: 0 auto 20px;}

  .button {margin: 15px auto 10px;}

  .button a {
      padding: 15px 20px;
      letter-spacing: 1px;
      font-size: 12px;
      font-weight: 400;
  }

  p {font-size: 17px;}

}

dipanjan94

Thank you again. It worked fine for mobile, just a tiny little thing -

In mobile, it shows a little scroll bar on the right, I don't know why. Attaching an image of the same. Any way to get rid of that?

Hikin' Mike

You have this in your code:

.container,
.menu-container,
.sm-user-ui html,
.sm-user-ui body {
    width: 100%;
    height: 100%;
    overflow-x: hidden
}

No idea why you put it there or what it's for, but it is something you added. You do seem to have a lot of code that you added that doesn't seem to do anything.