Mobile Site Font Size and Spacing Issues

Hi there – Your site is looking good!

I’ll answer your questions in batches since there are a few mixed together, and it’ll be easier to keep everything straight. ??

Is there a way to set your font with a different size and/or line spacing for mobile versus computer screens? Is there some media query that addresses this issue?

Sure! You would combine a media query with a CSS declaration targeting line-height and/or font-size.

You’ve already set the size here in your custom CSS:

.entry-content {
    font-size: 22px;
}

Remember, custom CSS applies to all screen sizes unless it’s wrapped in a media query.

If you find 22px too big on smaller screens, you’ll need to wrap it in a media query so it only affects larger screens, for example:

@media screen and (min-width: 900px) {
  .entry-content { 
    font-size: 22px; 
  }
}

I also noticed that you’re specifying a new Google font, Allegrya, in some custom CSS. Have you called in that font (enqueued it) with a plugin or in a child theme? I see your site in Times Roman – my browser’s default font – because I don’t think you’ve enqueued the font in your theme. If you’re seeing it in Allegrya on your end, you probably have that font installed on your computer. To make sure everyone who visits your site sees Allegrya as well, you’ll need to “enqueue” the font in addition to specifying it in custom CSS. A Google Fonts plugin like this one is a simple way to do that.

I’m also having a problem with a picture on my Home screen when I see it on the tablet display. I created two columns, one at 1/3 width for the picture, and one at 2/3 width for the text. I think it looks good on a computer screen as it is now, and I think it centers itself well on my phone at the moment, but on the tablet screen the picture and the text press against each-other without a buffer. (Additionally, the text looks awkwardly too long in this part, but that might be fixed if I can figure out about the font size/spacing.) I’ve messed around with the padding on my columns, but I can’t find anything that works for all screens. Is there a way to center the picture so it stays centered no matter what kind of screen it shows up on? I feel like this might allow some buffer between the picture and text under all circumstances, but I’m not sure.

Tip: you can test media queries by using a browser inspector, and making the browser window larger and smaller. No need to go back-and-forth to a phone or tablet. Just wanted to make sure you realized that!

Your columns have become quite complicated they way they’ve been done – there’s a lot of extra HTML markup now. ??

I’d suggest simplifying the structure to make your life a lot easier.

There is one place, though, on my Payment page, where two payment buttons stack right on top of each other on mobile, and I’m not sure how to create a little bit of space between then without messing up how it looks on a computer screen. Any thoughts on this?

You can add some margin to the button (Stripe form) in the first column of the Payments panel, on smaller screens only, with this:

@media screen and (max-width: 900px) {
  .post-224 .col1 form {
    margin-bottom: 20px;
  }
}

I’m sorry for so many questions, but I really think after this I’ll be able to leave you all alone for a while! I sincerely appreciate all the help I’ve received so far, and any more that comes in the future. Thanks again!

My pleasure!

Hey thanks! I was starting down the right track with line spacing, but I didn’t actually understand what “wrap it in a media query” meant. Now I get it! I think my mobile and desktop sites look a lot cleaner and more “normal,” now, without making the other look weird. Thanks a ton!

Also, not only did you answer my payment button spacing question, but you inadvertently taught me something else. I see the .post-224 on there, so I see you can affect one page and not another by identifying the page id first. I feel like this information will come in handy for me soon.

I already tried to use it on my home/welcome page to fix the column issue I was talking about, but I couldn’t figure it out. I tried to write css to isolate that page, and then create columns that way, .col1 being 30% (for the picture) and .col2 being 60% (for the text). I tried it in as many ways as I could, with and without media queries, making changes in the text editor, etc., but I never got it. Everything kept lining up in one super thin column, and the picture was tiny. The only way I can figure to have that 1/3 2/3 column setup is through HTML, but as you can see, it is not the best for mobile. If you can provide any css that accomplishes those goals, that’d make my dreams come true. If not, you’ve already helped me so much, and I greatly appreciate it. As I told another guy who hooked me up big time, you are welcome to commission a free custom song for your troubles!

Thanks again!

Hey thanks! I was starting down the right track with line spacing, but I didn’t actually understand what “wrap it in a media query” meant. Now I get it! I think my mobile and desktop sites look a lot cleaner and more “normal,” now, without making the other look weird. Thanks a ton!

Wonderful – and you’re very welcome! Media queries are such a useful thing once you understand how to use them.

Also, not only did you answer my payment button spacing question, but you inadvertently taught me something else. I see the .post-224 on there, so I see you can affect one page and not another by identifying the page id first. I feel like this information will come in handy for me soon.

That’s right! WordPress automatically adds a unique identifier on every post, page, and almost every automatically generated view (like blog, categories, etc.) – which can be helpful to hook into with CSS, as needed. You’ll find that unique identifier on the body tag.

I already tried to use it on my home/welcome page to fix the column issue I was talking about, but I couldn’t figure it out. I tried to write css to isolate that page, and then create columns that way, .col1 being 30% (for the picture) and .col2 being 60% (for the text). I tried it in as many ways as I could, with and without media queries, making changes in the text editor, etc., but I never got it.

Ah – but the .col1 and .col2 classes are already defined as 1/3 wide each from our earlier work with your audio players, remember? You can’t now reuse the same CSS class names with different widths defined. You’d need to create new classes, like .mynewclass1 and .mynewclass2

Let me look at this again for you and see what we can do. ??

If not, you’ve already helped me so much, and I greatly appreciate it.

It’s been my pleasure! I’ve enjoyed seeing you learn and watching your site come together.

As I told another guy who hooked me up big time, you are welcome to commission a free custom song for your troubles!

Oh wow – what a kind offer, thank you! I might have to take you up on that. ?? Stay tuned – pardon the pun. ??

• This reply was modified 7 years, 10 months ago by Kathryn Presner. Reason: fixed typo

You’ll find that unique identifier on the body tag.

I just realized that I should clarify that on the multi-panel pages in Shoreditch, those unique identifiers aren’t on the body tag, but on the article tag, for example:

<article id="post-7" class="post-7 page type-page status-publish has-post-thumbnail hentry" style="background-image: url('https://i0.wp.com/www.customsongworkshop.com/wp-content/uploads/2017/01/untitled-72.jpg?resize=2000%2C1500&ssl=1');">

Using a browser inspector makes these elements a bit easier to spot.

OK, please give this a try!

@media screen and (max-width: 980px) {
  .post-7 .two_third { 
    width: 100%; 
    display: block; 
    margin: 20px auto 0 auto; 
  }
  .post-7 .one_third { 
    float: none; 
    display: block; 
    margin: 0 auto; 
  }
}

It works with your existing columns so you don’t have to undo too much. Let me know!

First of all, nice pun! Until I start getting customers I have all the time in the world, so just lemme know!

Secondly, thank you, that css you gave me helped, but not exactly like I had hoped. I was still hoping for a tablet in landscape orientation to show the picture on the left and the text on the right (with a little buffer between them), but as it was, it showed the picture on top, centered, and the text below it. It looked good, but just not how I preferred. I messed around with these things a ton, and here’s what I came up with. Bear with me, because even now, I’m not sure exactly what I did, and there’s probably an easier way to do it.

So first, I changed what you gave me into this, and it looked how I wanted on a tablet in landscape, but looked weird when shrinking it, and looked bad on a phone:

@media screen and (max-width: 980px) {
  .post-7 .one_third { 
    width: 30%;
    display: block; 
    margin: 0px auto 0 auto; 
  }
  .post-7 .two_third { 
    float: right; 
    display: block; 
    margin: 0 auto; 
  }
}

After that I tried to fix it on phone screens, because the picture had gotten really small and was not centered. Here’s what I did:

@media screen and (max-width: 485px) {
  .post-7 .one_third { 
    width: 100%;
		float: none;
    display: block; 
    margin: 0px auto 0 auto; 
  }
  .post-7 .two_third { 
    float: none; 
    display: block; 
    margin: 0 auto; 
  }
}

That normalized the phone screen, but it still got uncentered and awkward in between those (probably how a tablet looks in portrait orientation, or a bigger phone or ipad mini, or something). So then I added back the original css you gave me, only decreased the max screen width, so that the picture would stay nicely centered above the text as it was being reduced:

@media screen and (max-width: 690px) {
  .post-7 .two_third { 
    width: 100%; 
    display: block; 
    margin: 20px auto 0 auto; 
  }
  .post-7 .one_third { 
    float: none; 
    display: block; 
    margin: 0 auto; 
  }
}

So now, as far as I can tell, it looks good on a full screen, on a tablet, and on a phone. On bigger screens the picture and text are next to each other with a little buffer between, and on smaller screens the picture is centered in the middle above the text.

Okay, so now is when you tell me all the things that are weird with it, I’m sure in a very pleasant and friendly way that doesn’t make me discouraged, which you’ve been doing expertly at this whole time. Thanks to you, I haven’t thrown my computer out the window, and throwing the computer out the window is kinda my thing!

Okay, take a look, and let me know what you think. Thanks a billion!

James, kudos to you! Your CSS looks just fine, and I tested your site at a range of screen sizes, from my giant desktop all the way to small phone size, and the panel looks just dandy to my eye at every size. Well done on this media query and the CSS in between!

Until I start getting customers I have all the time in the world, so just lemme know!

I would love a song – but really, only if you actually have time. ?? How about a song about CSS? ?? Thank you so much!

Okay, so now is when you tell me all the things that are weird with it, I’m sure in a very pleasant and friendly way that doesn’t make me discouraged, which you’ve been doing expertly at this whole time. Thanks to you, I haven’t thrown my computer out the window, and throwing the computer out the window is kinda my thing!

Also, I’m very glad to hear you haven’t felt like throwing your computer out the window lately. Replacing those all the time can get pricey! ??

Whoo hoo! I can’t believe it! I felt good about what I had done, but since it was so much trial and error I was certain that there was going to be some major flaws in it. So cool!

And I already started writing a song about CSS in my head. If you want to make any genre or content requests, you can email me at [email protected]. I’ll start recording next week.

Thanks again for all the help, and talk soon!