I recently created a new site for myself. I have an 83x83 image at the bottom of every page that links to another site. The clickable area is not limited to the size of the image, but instead is the entire column. For the life of me I can’t figure out how to make just the image clickable.
Any help is appreciated. The site is www.paulburddesign.com and the image / link is the Freelancer’s Union (orange & gray logo) at the bottom of each page.
Thanks!
When I inspect your code, I didn’t seem to be anything jumping out at me.
Anyway you can center the image using Flexbox. add a class to the column that directly contains image.
and in css…
.my-flex-column {display: flex; justify-content: center;}
That should do it.
Thanks @Whittfield! That did fix it - well, almost. I have a 50px bottom margin on the image that’s still clickable, but I can probably fix that in another way. Thanks for your help!
As a test I created a brand new project and added a single column to it (“Structure 1 Column”). Then I added a 100px wide image to the column and made it a link. As long as the image alignment was set to Left or Right (in the Inspector), everything worked properly and only the image itself was clickable. But, if the alignment was set to Center, the entire width of the column is also clickable. To be more specific, the area that’s clickable is restricted to the height of the image, but the width extends to the edge of the page (far outside the image).
This raises a larger question… in Blocs, is there simply no way to have a small clickable image, centered in a column, without adding custom CSS to restrict the clickable area to the actual size of the image? That seems strange to me, but admittedly I’m new to both Blocs and Bootstrap.
Welcome to the forum, Blocs and Bootstrap @PaulB 
Bootstrap is built upon Flexbox, and Blocs offers various Flex controls that can help you out in many regards.
Some controls via the sidebar:
https://help.blocsapp.com/article-tags/flexbox/
https://help.blocsapp.com/knowledge-base/column-control/
https://help.blocsapp.com/knowledge-base/row-controls/
Other controls via the Class Editor.
Here is a quick glimpse in the Blocs 4 what’s new video.
And here is a good overview in a video by @PeteSharp. @Eldar may have some videos also?
This is something I’ll try over the weekend. When I initially saw your post I thought I’d see a display:block on your Anchor tag or something that would make that Tag fill up the space, but that’s not what I’m seeing.
If I can duplicate this I think it’s going to come down to a question of bug or feature I suppose.
Thanks for your help @Whittfield and @Blocs_User!
Here’s a screenshot of what I was describing. The blue-line area is all clickable. This seems to be the default behavior when adding a small image / link to a column. Either adding @Whittfield CSS manually, or doing the same thing in the Class Editor (thanks to the video added by @Blocs_User), I am able to fix the problem and make just the image the clickable area.
Is it just me or does this seem backwards? I would think the default behavior would be to have just the image be clickable and if you want something else you would create a class for that. Having that empty area be clickable is confusing.
Anyway, at least I know now how to get around this. If I’m missing something and there’s a better way to do this, please let me know. Thanks again for your help!
Thanks for your help, @Jerry. I tried playing with that but I gave up because to some degree it seemed to dictate the size the image had to be in order to work properly and it was too easy to get extra clickable area outside the image. I may have been doing it incorrectly but it felt like a solution that would need tweaking every time it was used.
I’m actually hoping this is a bug as adding a simple image-link shouldn’t require any work-arounds.
Put the linked image into a div, give that div a class, set the width to the same as the image (83px) and set the left and right margin to auto. You would not need to give the image a width in this case.
If you prefer to work with flex, put the image into a div, and give the containing column instead a class with display: flex, set the direction left to right (or vice versa) and then justify the content to the center.
Both ways work.
Not sure if that issue is a bug, but I too would’ve expected to have just the image a link, not the complete column. Might ask @Norm about this.
Read my mind 
As a fourth option:
Add the picture to a card bric…
Thanks @pumpkin and @Jerry! It’s always good to have options. I’ll try submitting a support request and post back here if @Norm doesn’t see the mention here and chime in.
Agreed.
container / row / column / div / card
All these possible combinations so an <img> can be assigned <a href=""> @norm 
It does that because of the alignment that is applied to the image. An easy fix (well another way to do it) is to…
Select the column and change the alignment to the last option, like this…
Then add a class called .justify-content-center to the column.
This will solve it. It isn’t a bug, just the way Blocs approaches it.
Thanks for the info @PeteSharp! Strangely, this approach seems to only work with a “real” image. If you try to preview the page with the built-in placeholder image, it gets distorted.
It sounds like you’re saying that Blocs always assumes a center-aligned image is the full width of the column. So, it makes the whole area clickable regardless of the actual image size. And, if you only want the image to be clickable then you need to know the “tricks” to make it behave that way. This is a pretty big assumption.
I may be looking at things incorrectly, but I don’t quite understand the methodology behind this. It still seems backwards to me. It seems (to me) that when you make an image a link, the clickable area should always be the size of the image unless you take steps to make it behave differently.
That’s just my 2-cents. If this isn’t considered a bug, I would definitely call it a feature request. Is posting this in the “Wish List” category the best way to do that? Thanks!
I gave a very simple reason behind it, but its related to a style that is applied by Blocs - display: block
The place holder will distort if you have fixed width and height that are a different ratio than the placeholder image.
But I do agree, it probably isn’t the best way for this to work.
