Customizing page - moving text to the right of the image

dipanjan94dipanjan94 Registered Users Posts: 83 Big grins

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
!

Comments

  • AllenAllen Registered Users Posts: 10,008 Major grins

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

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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;}
    
    }
    
  • dipanjan94dipanjan94 Registered Users Posts: 83 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited December 18, 2020

    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;}
    
    }
    
  • dipanjan94dipanjan94 Registered Users Posts: 83 Big grins
    edited December 19, 2020

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited December 19, 2020

    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.

Sign In or Register to comment.