Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

Antimatter Site Title on Mobile Devices

Started by Muut Archive 11 years ago · 2 replies · 225 views
11 years ago

My site's title is a little on the long side. It's fine in the desktop view, but on mobile devices the title wraps below the header area into the main body. The hamburger icon also gets shifted as a result.

What's the right CSS class or id I need to be modifying to shrink ONLY the mobile site title?

11 years ago

If you inspect it with the web developer tools, you can see there are 2 sizes. One when page first loads, and another when it's scrolled.

The one when it loads, is the standard size, so you will have to add a media query in the scss/template/_header.scss file, around line 54 for the #header #logo h3 element:

TXT
@include breakpoint(mobile-only) {
    font-size: 20px;
}

Then you will need to add a similar media query for the #header.scrolled #logo h3 element around line 21

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1323 9 years ago
Archive · by Muut Archive, 9 years ago
2 919 9 years ago
Archive · by Muut Archive, 9 years ago
2 4048 9 years ago
Archive · by Muut Archive, 9 years ago
1 2923 9 years ago
Archive · by Muut Archive, 9 years ago
3 1106 9 years ago