hi to all i have an image circle, after i put wordpress get avatar i can’t control height and width and image became square
i try border-radius: 50px but nothing happend
thanks in advance
Hi @vincentba,
If you could share some of your code it would be helpful. Otherwise it would be a guessing game with a lot of possibilities.
Cheers,
Bob
Hi @vincentba,
Your code is partially helpful. I actually would like to see both the DOM tree and also the WordPress action block. Just guessing, the probable problem is that you have applied the wp-get-avatar action to the image that also has the styling to give it a rounded border. You need to put the image inside an outer container so that you don’t replace the inline styling when you replace the image. Make sense?
Cheers,
Bob
this is the DOM
Heading
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.
I try to put image inside a div and set “get avatar” on the image and imageis always square, after i create a container and i put image inside, and set get avatar on image, but both are square
thanks in advance
Hi @vincentba,
So, the DOM is from the Tree panel - it is a hierarchical representation of the HTML code on the page. Right now, I think, your code is set-up like this:
<img src="..." style="border-radius: 50%;..." wp-get-avatar>
So, if your WordPress action is set-up to replace the element, It will also remove that style attribute. You need code something like:
<div class="avatar-image">
<img src="..." wp-get-avatar>
</div>
Again, with the WordPress action targeting the element. And then in you stylesheet have a rule like this:
.avatar-image img {
border-radius: 50%;
}
Cheers,
Bob
1 Like
i have solved following putting css rule inside style.css
.avatar-image img {
border-radius: 50%;
}
with inline style no work, with rule in css works, thanks a lot