I wish this forum allowed screenshots but I’ll try to describe what’s going on.
My Site Title is HavaWebsites.com, just like that – all one word. Which looks fine on my desktop but on my iPhone, the header looks like this:
HavaWe
bsites.c
om
Significantly less beautiful, lol.
If there is a way of doing it, what I’d like to do is tell the browser how to break up the title of my website *if* it needs to be broken up because the screen is too skinny. If it doesn’t need to be broken up, then still have it read as HavaWebsites.com. I hope that makes sense.
I’d like it to break up my title in a mobile device as:
Hava
Websites
.com
Which looks a lot better, obviously, and has the bonus points of actually being readable! lol.
Is there a way of doing that? I understand if I’m asking for something that can’t be done.
Thanks for your time,
Havilah
Okay, so a second, related problem:
When I go to Appearance > Customize to make changes to my website, it gives me a preview of my website on the right-hand side of the screen. Since the menu and choices are down the left-hand side of the screen, the computer shrinks my website to make it fit. And that’s where I see my Site Title (HavaWebsites.com) and the Header Text (Custom websites without the custom price) overlap each other in a jumble.
Instead of saying that these items should be x pixels in size, is there a way to make them x% of the screen, so they’ll scale up or down as the screen size changes? Or, alternatively, is there a way of having the Header Text show up underneath the Site Title if there isn’t enough retail space on one line to house them both? They automatically do that on my iPhone so I assumed they would do that if a computer screen were too small but it doesn’t look like it does.
Thanks!!!
Havilah
Hi Havilah
We’ll need two blocks of selectors to sort this out. The first block, you can ignore everything inside of it. Just set the breakpoint to where you want it, nothing inside needs to be changed. Just paste this at the bottom of your Custom CSS and set the breakpoint number to where you want it:
/* Vantage Header Responsive Breakpoint */ @media (max-width: 960px) { body.responsive header#masthead .hgroup { text-align: center; } body.responsive header#masthead .hgroup .logo { float: none; } body.responsive header#masthead .hgroup .logo img { margin: 0 auto; padding-top: 0px !important; padding-bottom: 0px !important; } body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } body.responsive header#masthead .hgroup .support-text img, body.responsive header#masthead .hgroup #header-sidebar img { max-width: 100%; height: auto; } body.responsive header#masthead .hgroup #header-sidebar { padding-top: 0 !important; padding-bottom: 0 !important; height: auto; } body.responsive header#masthead .hgroup #header-sidebar .widget { display: block; margin: 0 auto; float: none; } }The second set you need is to set the font size of your title and tagline on mobile, for that you can use the below. Adjust the font-sizes and breakpoint as required:
/* Mobile */ @media (max-width: 760px) { header#masthead .hgroup h1 { font-size: 20px; } header#masthead .hgroup .support-text { font-size: 25px; } }I’m sorry – I don’t understand the word “breakpoint.” I mean, I know what that words means, lol, just not in this context.
Just so you know, I copied and pasted the code into WordPress exactly how you have it above and then started trying to mess with the mobile settings. That is not going well – I’ll make changes to the font size, refresh the page on my iPhone and everything is still the same. I don’t know what’s going on with my iPhone. I’m not entirely sure that’s the theme’s fault – I’m thinking there’s something going on with my iPhone.
But as for the first portion of code…I don’t know what to do with it. Can you be more specific?
Sorry to keep bothering you!
Havilah
In case anyone else runs into the mobile website not refreshing on their Apple product, I did some Google searching and found a product called Adobe Edge Inspect CC.
It’s free – you download three programs: A desktop program, an extension into Google Chrome and an app onto your iPhone. It sounds complicated but it’s actually not too difficult to get set up.
Basically what happens is, you open up a page in your Google Chrome browser and that page automatically shows up on your iPhone. Then you make changes to that page, save it, and the new version of the page shows up on your iPhone; this allows you to automatically see the updates made and you are guaranteed to have the latest version of that page.
Apparently, Safari isn’t the best at actually refreshing and pulling the latest version of a page, and I was finding that I could close Safari, restart my phone, reopen Safari, and the old version of my page was still showing up. ??? Fortunately, Adobe Edge Inspect CC takes care of all that.
I have been able to change the custom CSS that controls the font size on mobile devices so that my Site Title is no longer too large for a mobile screen, thanks to Andrew and Adobe Edge. :)
I am still not sure how to change the breakpoint in the first set of CSS code, however. Any hints would be appreciated.
Thanks!
Havilah
I decided to just start messing with the code you gave – I figured since I haven’t told anyone about this website, it really doesn’t matter if I just break it into pieces, lol.
Changing the
code to much smaller numbers (like 500 px) didn’t change anything, and changing it to slightly larger numbers (like 1000 px) didn’t do anything either. So I decided to go really big and see what would happen (10,000 px) and that seems to have solved the problem. I don’t actually understand what the number was that I was messing with or why it was changing things, lol, but the good news is that my site title no longer looks drunk, whether on large or small screens.
Many thanks for all of your help,
Havilah
Apologies for the confusion here. Yes, this is the breakpoint:
All the selectors wrapped in the breakpoint media query will only take effect up until that width.
However, 10,000px isn’t ideal. What was happening before was your site title and tagline were crossing over each other. This was happening before the media query kicked in that forced the two onto two lines. So all we needed to do there was increase the screen width at which that was happening.
Your title and header text start crossing over each other at around 1125px so to make everything behave nicely I’d recommend setting the breakpoint to 1200px. All that will do is force your site title and header text onto to separate lines from 1200px downwards.
Hope that helps.
/* Vantage Header Responsive Breakpoint */ @media (max-width: 1200px) { body.responsive header#masthead .hgroup { text-align: center; } body.responsive header#masthead .hgroup .logo { float: none; } body.responsive header#masthead .hgroup .logo img { margin: 0 auto; padding-top: 0px !important; padding-bottom: 0px !important; } body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } body.responsive header#masthead .hgroup .support-text img, body.responsive header#masthead .hgroup #header-sidebar img { max-width: 100%; height: auto; } body.responsive header#masthead .hgroup #header-sidebar { padding-top: 0 !important; padding-bottom: 0 !important; height: auto; } body.responsive header#masthead .hgroup #header-sidebar .widget { display: block; margin: 0 auto; float: none; } }I get it!!!! If a screen is 1200px wide or smaller, your coding would force it to show up on two lines. If it’s 1201px wide or larger, it will show up on one line.
Total lightbulb moment right there. Thank you!!
So for future reference, how did you know that my text starting crossing over itself at 1125px? I could keep changing the CSS until I saw that they were no longer crossing over each other, of course, but I’m assuming there’s an easier way to do that.
Havilah
Super, glad to hear you’ve made progress there.
I’m running a Google Chrome extension called Window Resizer. I don’t really use it for that purpose but it does also print a read out in the bottom corner of the screen when you re-size the window giving window and viewport sizes in pixels. That’s how I was able to tell where the issue was occurring.