TomKnowsNoCSS Posted January 12 Share Posted January 12 Hi, Site: https://www.boutique14.co.uk How do I prevent the site title from stacking on mobile please? On desktop it looks like this: But when it goes to media screen / mobile view the site title and subtitle stack like this: I have tried using a mobile-only logo which is merely a jpg screen grab of the site title from desktop view, and that looks ok (ish), but ideally I'd like to find a way to keep using a site title in text rather than a mobile logo. Is there someway it can dynamically scale the font size so it always stays on one line? NB I'm also using this CSS to create the subtitle "bespoke wedding stationery" //Inserts subtitle 2nd line to site title and styles it// a#site-title:after { content: "bespoke wedding stationery"; display: block; font-size: 1.3rem; font-family: 'Garamond'; letter-spacing: 3px; line-height: 1.3rem; } Obviously I want to retain the subtitle and prevent that from stacking too. Thank you! Tom Link to comment
JayVanDyke Posted January 12 Share Posted January 12 @TomKnowsNoCSS I would do this with some media queries at different breakpoints, most likely just 640px and under. Change your CSS to this and adjust those font sizes below. You can copy and paste the media query and change the size to something else 767px 500px 320px etc. a#site-title { &:after { content: "bespoke wedding stationery"; display: block; font-size: 1.3rem; font-family: 'Garamond'; letter-spacing: 3px; line-height: 1.3rem; } //change these font sizes or add different pixel widths as needed @media only screen and (max-width: 640px) { font-size: 20px !important; &:after { font-size: 1rem; } } } tuanphan 1 ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs Link to comment
TomKnowsNoCSS Posted January 13 Author Share Posted January 13 Thank you Jaeveedee, I appreciate your help. Although that solved the problem in principle, in practice I couldn't find the optimal font sizes to make it work across all devices, so I've gone with a mobile logo jpg. Thank you though. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment