On my site http://www.willoughbyglass.com.au/ I have a list of services provided, with a thumbnail image of each aligned in the centre. This is styled correctly when the image is not a link, however when I make it a link, the image distorts and becomes left aligned in the column.
I cant figure out why! Any help would be appreciated.
TIA
Hello There,
Thanks for posting in! I have duplicated your page in my local testing server and I could not replicate the issue. The image is still centered in my end.
Could you please make it a link so that we can figure out why it is behaving badly in your site?
Thank you in advance.
Changed to a link…
Hey @roy1jones,
It’s because of your custom width. When you turn the Classic Image element into a link, you’re applying the custom width to the link or anchor tag and not the image itself and also you have applied the man class to your element. But, even without that class, out of the box, the browser applies 0px margin to elements so it won’t get centered even if you have set the column text alignment to center.
To center it, you must remove the man class and add margin: 0 auto to your inline CSS.
The image also are not in proportion because you’re not using a square image. Setting 100px width and height is not a good solution because you’re actually distorting the image. And, it won’t work when you enable the link because the size is applied to the link and not the image.
Hope that helps.
Thanks for the reply!
Sounds like overall I’ve come up with a pretty poor amateur coding solution haha.
Am I best off editing the image so its a circle straight off rther than converting it to circle in the theme?
Hey @roy1jones,
If circle is your final design, then yes, it would be best to edit it directly.
If in the future you decide to try another style, it would be easier if you use a square image as that would be compatible to all Image Styles.
Hope that helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.