text over image and dotted border

Hey argentinadelfina,

Thanks for the screenshot, could you post a link to where we can see the element you want to apply this to as well please?

Best regards,
Rikard

Hi,

Thanks for the update. Could you start creating the page in question, then post a link to where we can see the results please? We can help you out with the styling around the card for example.

Best regards,
Rikard

Hi,

Thanks for that. Please assign a class to the text block element, in the advanced tab. You can call it dotted-border for example. Then add this in Quick CSS:

.dotted-border p {
    border: 2px dotted #eee;
    border-radius: 15px;
    padding: 15px;
}

Best regards,
Rikard

Hi,
Sorry for the very late reply, and thanks for the mockup, this is what I came up with:

this is a text block element inside a 3/5 column inside a color section:


this is the text block content:

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<img class="size-medium wp-image-1959 alignleft" src="https://test.test/wp-content/uploads/2017/02/people-2-1-300x300.jpg" alt="" width="300" height="300" />
<h3>Ut nisi sem, sagittis sodales risus vel, fringilla lobortis ex. Suspendisse urna quam, laoreet nec bibendum quis, tincidunt eu turpis.</h3>
– link 1
– link 2
– link 3
emailaddress here

For the border I added a custom class dotted-border to the 3/5 column, and then used this css:

.dotted-border {
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='50' ry='50' stroke='black' stroke-width='4' stroke-dasharray='2%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
border-radius: 50px;
	padding: 30px;
}

Please give this a try.

Best regards,
Mike

Hi,
Glad to help, but I’m not understanding your screenshots, the layout of the text seems the same, please try updating your test page so we can investigate further.

Best regards,
Mike

Hi,
Thanks for the feedback, the reason why you have two dotted borders is because your css is targeting .dotted-border p
instead of .dotted-border as I posted in the example above.

Best regards,
Mike

Hi,
Please try following these steps to achieve this layout:

Are you still using “/?page_id=4727” as a test page? It doesn’t represent the steps in the solution. Please include an admin login in the Private Content area.

Best regards,
Mike

Hi,
Thank you for the feedback, the issue I see is that in your code you have wrapped all of the content in a paragraph (p) which you have added text-align: left; to.
In the code I posted the title is an H2, the text is an H3, this way they can be adjusted individually.
Please try this example under your example on the test page:

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<img class="size-medium wp-image-1959 alignleft" src="https://test.test/wp-content/uploads/2017/02/people-2-1-300x300.jpg" alt="" width="300" height="300" />
<h3>Ut nisi sem, sagittis sodales risus vel, fringilla lobortis ex. Suspendisse urna quam, laoreet nec bibendum quis, tincidunt eu turpis.</h3>
<a href="#">– link 1</a>
<a href="#">– link 2</a>
<a href="#">– link 3</a>
email address here

Please ensure the custom class for the column is dotted-border-new and add this css:

.dotted-border-new {
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='50' ry='50' stroke='black' stroke-width='4' stroke-dasharray='2%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
border-radius: 50px;
	padding: 30px;
}
.dotted-border-new h2 {
	text-align: center;
}

This is the expected results

Best regards,
Mike

Hi,
Please include an admin login in the Private Content area.

Best regards,
Mike