I used the AI generation tool to create a template for my new brand and now I’m trying to customize the design. The original svg was coded (I think) rather than an image, and I’ve replaced it with a design for my brand, however that design is showing up cropped around the edges so it appears as a circle not a square.
I can’t see any radius / borders on the classes. Can anyone give me pointers on how to fix this so the image is a square and my logo isn’t cut off?
Hello @Matt_O,
For some reason I can only see the preview with your read-only link, not the designer view, maybe because it is ai generated? Anyway, when I inspect your site on the browser, I see that your all images class has a border radius
So select that class and just reset that border radius, that will affect all other images though, or to avoid that you can give your logo image a border radius of 0. I hope this helps.
Matt as Pablo notes here, it’s on the img directly which most likely appears when you select All Images as the class. However as you’ll notice most images do have a border radius in the design, so you’ll need to create a class for them, and assign that --ai-gen var if you want them to look the same.
Either that, or override the logo specifically with a border-radius: 0;
My expectation was that if I was inheriting the style from ‘All images’ that I would be able to see that within the style control panel. Whilst the screen indicates that I’m inheriting border styling with the orange color, it actually shows the border radius as 0. This means that the unique class I’ve applied to this image doesn’t enable me to adjust this setting, as it’s already 0.
(Not sure if I’m recalling the standard functionality perfectly here, or whether this is another ‘feature’ of the AI-generation)
I’d expect that also. The AI generator doesn’t use the UI directly though and can create styling rules that the designer UI might not interpret well in the panel, or might hide.
It’s weird that Pablo and I can’t see the style panel in the readonly link but I suspect that if you clicked the second button on Radius, you might see numbers set for the corners individually. The designer would hide that if it’s confused about what approach is being used. But yes, that orange… it’s detecting some part of it.
If you change the class selector to All Images, I’d think you’ll see the original blue settings there, and it would be interesting to see what it has set. I suspect it’s set both the overall radius to 0, and the individual corner radiuses as well. The browser is giving the individual corner radiuses priority, but the style panel doesn’t know which to show.
I like the freedom the AI has, and I think these glitches are a Good Thing, but it means the WF team will have to rethink how the style panel detects and indicates styling, so that the AI styling is correctly represented even when it’s Webflow-unorthodox.
