• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

News Pro – How to get a simple responsive header – No image – No widget

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › News Pro – How to get a simple responsive header – No image – No widget

This topic is: resolved

Tagged: css, header, News Pro, responsive

  • This topic has 2 replies, 2 voices, and was last updated 7 years, 6 months ago by Mark_o.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • November 1, 2017 at 7:03 pm #213161
    Mark_o
    Member

    Hi

    I am using New Pro and want a simple responsive header

    - I don't want to use a image/logo (520 x 180 pixels is image size for the header)
    - I don't want to use the widget (header right widget)

    If i don't upload the image and don't activate the widget, I get the site title BUT it is not responsive - does not look good on a mobile (see link below):

    http://readingspace.com/

    How do i fix this ?
    Also is it possible to change the font size /style for just the header ?

    I have looked at a possible solution of having a "Full Width Header Image" as described by Brad Dalton but would prefer a simple stylized text as header.

    https://wpsites.net/web-design/news-pro-full-container-width-header-image/

    Would really appreciate any help I can get.

    Mark

    November 2, 2017 at 6:59 am #213170
    sangfroidweb
    Participant

    Hi Mark!
    You are on to the solution by looking at changing the font size of the site title. The issue on mobile is that the text of the title one word (which means the text doesn't wrap by default) and at the current font size it is too large to fit on smaller phone screens (less than 400px), so it's hanging over and interfering with the layout at that size.

    To adjust that, you can adjust the font-size for the .site-title element on screens less than 400px wide by using the following css. You can add this to the bottom of the stylesheet.


    @media
    only screen and (max-width: 400px) {
    .site-title {
    font-size: 38px;
    font-size: 3.8rem;
    }
    }

    38px seems to fit even on iPhone 5, but you can obviously adjust that to whatever you prefer.

    Any global changes to the h1.site-title can be made at line 1271 which is:

    .site-title {
    font-weight: 700;
    font-size: 48px;
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    }

    The color of the .site-title is applied to the a tag inside the h1, so if you want to change the color of the site-header text, you'd need to adjust the color of the a tag on line 1283 of the stylesheet which is:

    .site-title a,
    .site-title a:focus,
    .site-title a:hover {
    color: #000;
    }

    I hope this helps! Let me know if I misunderstood the questions.
    Liz


    Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

    November 2, 2017 at 5:17 pm #213207
    Mark_o
    Member

    Hi Liz

    This is exactly what I was looking for !!!

    Thanks a lot for your help.

    Mark

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘News Pro – How to get a simple responsive header – No image – No widget’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble