Button sizing issues


#1

Team,

      I'm scaling up buttons and then adding photos for a "clickable link" to another page. Basically it looks like an articles block but with text over the photo.   When I preview the site and resize, the photos don't shrink and the button becomes elongated as well, and the text in the button also extends beyond the button and doesn't resize.  basically looking like crap.  

    I assume I'm doing something wrong.  Any ideas?

#2

Firstly, when writing to the forum, just use plain text, you appear to have used the code option which places your comment in a scrollable text area - difficult for others to read.

The correct way to make an image button is to add a button to your page. Then, with the button selected, create a custom class. In the class editor window, use the metrics tab to adjust the size of your button in height and width. Then switch to the paintbrush tab and select a background image as shown in the screenshot below. Adjust the width of the image to the same as the button width (in the example below, the width was set to 329px) You can also use the position and repeat options to make sure your image displays correctly. If required, switch to the Text tab and adjust the line spacing to position the button text where you want it to appear.

Once you’ve created the button for your desktop view, change to the tablet and smartphone views and adjust the custom class settings for each view.


#3

Hi,

Why not just use an image Bric and set the Interactions Type to Navigate to page or URL if it’s another website.
The image will be responsive and scale fine.

Cheers / Johny


#4

I think the OP wants text over the image (I may have got that wrong, of course). I’m sure that can be added to the normal image solution, but may require a little more work.


#5

Ok i missed that he wanted text over the image :flushed:

Here’s quick way to add text over a clickable image.
Hope it helps.

Cheers / Johny


#6

You are a gem!


#7

Thanks team!