[Angela]

I’ve tried numerous times to make this post, but the forum keeps deleting it from this theme for some reason. I’m going to try making this post again one more time before I consult the support gurus of the forums for help.

Good day to you all,

I’m worried I might be making this more complicated than it needs to be. To preface my issue, this is what my post’s header looks like on a computer screen.

This is perfect. I’m happy with the way this looks.

However, when I load the same post on a phone, the title of the post gets hidden under the logo.

Generally, I would shrug this off since it doesn’t look terrible. But then, when it comes to posts/pages with longer titles, such as the one below, the titles stick out from under the logo.

Viewed on Computer Screen (This is perfect!):

Viewed on Phone Screen (This is NOT perfect – see the title sticking out from under the logo):

The Problem: Instead of stacking under the logo when the screen size shrinks, the titles of my pages/posts are getting hidden on the layer below the logo.

*To ensure I’m being crystal clear on what I’m trying to accomplish, I made this doodle to demonstrate:

Attempts at a Solution:

• Commonly, when I want something to stack on a mobile device, there’s a switch in the theme called, “Stack on Mobile” that I can toggle on and off. I searched for such a toggle for the page/post titles under every menu imaginable under “Dashboard => Customize” and “Edit Page => Document.” I could find no such thing (although, this could be because I’m sleep deprived.)
• Then, I decided to go digging through the CSS in the theme to see if I could get the logo to shrink into the top left corner of the screen on a mobile device in the hopes it would reveal the page/post title below. No matter what I put into the style sheet, nothing changed. Some other style sheet must have been overriding my edits. This probably wasn’t the best solution anyway, so I won’t bother to post my attempts at editing the CSS here.
• Finally, I tried editing the div class on the page/post title. However, I went through every CSS folder in the theme and could not find the class of the title anywhere.

According to my web inspector, the div class is section-title-wrapper. Why is it non-existent in any of the CSS folders?

I’m not sure what else to try. At this point, I’m hoping one of you will reply with something along the lines of, “You silly person, you just had to press this super obvious button here!” :’)

[sapana]

@zmori: Go to=> Appearance=> Customize=> Additional CSS=> add the following css code

@media screen and (max-width: 550px) {
 .site-identity {
    display: inline-block !important;
    margin:15px;
  }
}

– Your logo size is too big you can control the logo size so that site title and tagline will display more appropriately in mobile device

.custom-logo {
    max-width: 135px;
}

let me know if this works out!

Kind Regards,
Sapana

[Angela]

Hello again, @sapana!

Yes, that works better, thank you! What would I add to the CSS on the logo to keep it large (250 px) on a computer screen but still keep it 135px on a smaller screen?

[Angela]

Nevermind, I got it! Thanks again so much! I’ll be sure to leave a good review. ^^

For those who were confused like I was, this was what I did to get the logo to shrink on smaller screen sizes but stay big on computer screens:

I just closed the bracket on the other side of the logo’s class and tweaked the numbers until everything looked about right. Like @sapana said, go to “Additional CSS.” This what I put in:

@media screen and (max-width: 550px) {
 .site-identity {
    display: inline-block !important;
    margin:15px;
  }

.custom-logo {
    max-width: 130px;
}
}

The condensed menu (or the hamburger menu) was placed in a funny spot on my mobile device when I did this, so I added a margin to the menu so it would sit under the logo correctly:

.menu-toggle-wrapper {
    margin-left: -20px;
}

[sapana]

@zmori: Glad to know that you figure it out. Have a good day 🙂

Kind Regards,
Sapana

[Author]

Posts