Custom CSS align product images Free Fluid Template

  • I am trying to use product images in my customer completed order emails using the Free Fluid Template.
    I have images on. Right now the product text appears in a 2 lines starting with the first one aligned to the bottom of the image and flowing to second line beneath the image which does not look good.
    I want to have the images left and the text left aligned beside it. Either at the top or middle, so that no text flows beneath. I can not seem to get it to work.
    I have tried using the CToWUd class for the image, nothing happens.

    .CToWUd{
width:75px !important;
height:auto;
float:left !important;
margin-right:15px;
}
Viewing 8 replies - 1 through 8 (of 8 total)
  • hannah

    (@hannahritner)

    Hey,
    Sorry for the delay! Would you mind sending a screenshot of this? https://imgbb.com/
    Thanks!

    Hannah

    Thread Starter mgason

    (@mgason)

    Hi,
    it seems I was a bit wrong with my description, I had been messing about with it for a while. Default is all text below the image. I want the text aligned next to the image. I have posted screenshots of my setup and what I want it to be with CSS applied at element level in Chrome inspector.
    basic setup
    https://ibb.co/qFCy976

    desired version
    https://ibb.co/nPLQDNG

    • This reply was modified 4 years, 4 months ago by mgason.
    hannah

    (@hannahritner)

    Try adding this to your css:

    img.attachment-100x50.size-100x50 {
    float: left;
    margin-right: 10px;
}

    Does that work for you?

    Hannah

    First of all, thank you to the developer for giving this plugin for free!
    I also want the text aligned next to the image, but unfortunately the code above doesn’t effect anything!? I’m no coder, did I right when I put it in plugins custom styles!?

    I just saw, if I use 50×50 image size the text is in line with the image!? So the table may cause the issue.

    hannah

    (@hannahritner)

    Hey @ole_wilkenburg,
    The css is specific to the 50×50 image size. Which image size are you wanting to use?

    Hannah

    Hello @hannahritner, 50×50 is what I want to use!

    hannah

    (@hannahritner)

    Have you selected this from the Email Customizer > Content > Order Items > Product Image Size?

    Hannah

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Custom CSS align product images Free Fluid Template’ is closed to new replies.

Tags