Constraining button to widge

Hi,

This is very dependent on the widget theme styling. In general you can indeed use the responsive settings.

Also you can remove the button width and height from the main buttons as well. The size then will depend on text and padding.

Please give me a link where I can see the issue, so I can check how to solve this.

Here is an Example page where I recreated the problem. Thank you

And what’s the problematic one there? The only thing I noticed is the ‘hair’ button overlapping that map at some point. That’s easily solved by adding the responsive break point at the screen size that is happening and put the width to 100 or less %.
|

Yes the “Hair” button is the problematic one. I have tried doing what you suggested. It unfortunately does not resolve the issue properly. Rather than shrinking the whole button to fit the widget, it is either cutting off the bottom of the button, or shrinking just the button but not the text, so that the text ends up at the bottom of the square instead of at the center. I can’t tell which is happening.

The responsive settings are to help in simple cases but can’t replace a whole responsive design of a site. I guess the ‘button is cut off’ as you say because the text line has a top padding of 100px, so it will stay there. To fix that you’ll need to do some custom CSS yourself.

One other option I can suggest is to copy the button and make it small and workable the way you want in responsive view. In responsive settings you can hide the big button for certain screen sizes ( ‘hide button in this view’ ), and show the small button for the same ones. Then put both shortcodes in there, see if that works.