catherineshep Posted January 22 Posted January 22 Hello! My image titles are wrapping mid-word on the mobile version of my site. I don't want to make the titles smaller because on the desktop version, the large text size is necessary for the design and would look awkward otherwise. Is there a setting to make text auto-resize on mobile rather than break up titles in the middle of a word?
tuanphan Posted January 23 Posted January 23 Hi, Can you share link to these pages? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
catherineshep Posted January 23 Author Posted January 23 https://www.catherinesheppard.com/permanent-jewelry https://www.catherinesheppard.com/
tuanphan Posted January 28 Posted January 28 Hi, It looks like you fixed it? It is fine to me now Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Abdullah_23 Posted January 30 Posted January 30 Hello! To address the issue of image titles wrapping mid-word on the mobile version of your site without reducing the text size, you can consider using CSS media queries and the overflow-wrap property. The default styles for your image titles are set, including the desired font size. The overflow-wrap: break-word; property is used to allow word wrapping under normal circumstances. Inside a media query for screens with a maximum width of 600 pixels (you can adjust this value based on your needs for mobile responsiveness), the font-size is set to auto, which lets the browser adjust the font size based on available space. white-space: nowrap; prevents the text from wrapping, and overflow: hidden; hides any overflow content that doesn't fit within the designated space. This way, on mobile devices, the font size can be adjusted automatically, and the titles won't break mid-word, while on larger screens, the specified font size is maintained. Adjust the values as needed to suit your design preferences.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment