How can I float an image to the right of a text block

  • Eva Lim

    (@dogstalkpoetry)


    6 years, 10 months ago

    Hi, I’m trying to create a block of text with a circular image aligned to the right.

    I’ve managed to create the layout in Elementor using Text Editor except with a square image. When I edit the image, there is a field for Image CSS Class where I’ve added “right-circle” and wrote the code below (which I know it works) in my stylesheet:
    img.right-circle {
    display: block;
    float: right;
    margin-left: 20px;
    border-radius: 200px;
    }
    However, the image remains a square instead of a circle. Any idea why?
    I’m open to using another method. I’ve also tried columns – one with text and the other with image, but I couldn’t get the text to flow under the image.

    Thanks for any help.

Viewing 1 replies (of 1 total)
  • purbeckpixels

    (@purbeckpixels)

    6 years, 10 months ago

    Try:

    .right-circle img {
float: right;
margin-left: 20px;
border-radius: 200px !important;
}

    I tested it by adding the above CSS to my child theme’s style.css and an image to a Text Editor element, then placing ‘right-circle’ under Advanced > CSS Classes of the Text Editor itself. Elementor’s default CSS for images declares a border-radius, so by adding ‘!important’ to the new border-radius declaration it will always be applied ahead of the Elementor declaration.

Viewing 1 replies (of 1 total)
  • The topic ‘How can I float an image to the right of a text block’ is closed to new replies.