Stopping Image Shrinking and Button Text Wrapping in row

  • Unknown's avatar

    Setting up a a simple blog page on https://gravid.biz/blog/ with a couple of supposedly unobtrusive Amazon Affiliate banners at the top and the bottom of the query block. The problem is I can’t seem to find any way of controlling the image width and text-wrap properties of my buttons.

    I have a row container with three objects in it – an image, a paragraph and a button.

    The site looks fine on desktop but on my wife’s iPhone the ‘Buy’ button text gets rendered on two or three lines (which is both ugly and just wrong). I have tried specifying the width of the buttons container, and I have tried all of the fit, fill and fixed options. I also tried adding the following to the additional CSS

    wp-element-button:{text-wrap: nowrap;}

    The Image is also getting shrunk despite having height and width declared

    I would much rather have the text in the middle overflow to another line than compromise the other objects.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Got it sorted by making the outer items fixed a specified width, inner text fill, and custom left-right padding on the button to reduce its overall width. Still frustrating that fixed width doesn’t actually mean fixed width

  • Unknown's avatar

    running into the same problem. annoying!

  • The topic ‘Stopping Image Shrinking and Button Text Wrapping in row’ is closed to new replies.