Picture and Memo Option

Is there anyway to do this?

Hello there,

Probably you could accomplish the same result with a text widget. Insert a Text widget in page builder editor. Switch to Text mode, then enter this HTML code:

    <div class="memo-image">

      Replace this line with an image
      
    </div>

    <div class="memo-content">
      Enter your text content here
    </div>

Place your cursor to “Replace this line with an image” and insert an image by clicking on the Add Media button.

Replace “Enter your text content here” line with your paragraph content.

Under the “Widget Styles” section at the right side, expand the Attributes options. Then enter “my-memo” (without quotes) class name to the Widget Class option.

Save and publish/update.

Then go to Appearance > Customize > Additional CSS; and add the below CSS code:

.my-memo .memo-content {
  background-color: #fff000;
  padding: 20px;
  margin-top: 20px;
}

@media only screen and (min-width: 600px) {

  .my-memo .textwidget:before,
  .my-memo .textwidget:after {
    content: '';
    display: block;
    clear: both;
  }
  
  .my-memo .memo-image {
    width: 40%;
    float: left;
  }

  .my-memo .memo-content {
    width: 60%;
    float: left;
    margin-top: 80px;
    margin-left: -80px;
  }

}

Do your own CSS code adjustments as needed.

Regards,
Kharis

Thank you Kharis! How would I make the picture bigger? It is already a large photo but it currently looks like this

I renewed my account which changed my login information, but I am still awaiting your response to this topic.
Thank you :slight_smile:

It looks like your image is too narrow. Try using the larger one. Or add this CSS code:

  .my-memo .memo-image img {
    width: 100%;
    height: auto;
  }

Regards,
Kharis

Kharis,

the code worked perfectly! thanks :slight_smile:

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Greetings,

I did this for a clients page here:

https://daniellamorrow.com/contact/

It looks great on the computer but on mobile view theres a gap between the purple photo and blue contact form. I want it to appear overlapped on mobile view as well.

any way to fix this?

thanks

Hello there,

To eliminate the space between the boxes on mobile screen, add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 599px) {
      .memo-image > p {
        margin-bottom: 0;
      }
      .my-memo .memo-content {
        margin-top: 0;
      }
    }

Regards,
Kharis