Stopping Image Shrinking and Button Text Wrapping in row
-
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)
-
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
-
- The topic ‘Stopping Image Shrinking and Button Text Wrapping in row’ is closed to new replies.