Support » Theme: Mission News » Mobile Responsiveness

  • Hi Ben,
    I would like to ask you how it is possible to adjust everything, from site title and header size to post titles, accordingly to mobile view. For example, I saw this website http://www.missionmidwest.com of which the header is displayed smaller, namely responsive, in mobile view.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hey Chris,

    That is the default state for the header on mobile devices. It looks like there’s some CSS on your site used to resize the site title and tagline which is also keeping them large at mobile screen widths:

    .site-title {
      font-size: 40px;
    }
    .tagline {
      font-size: 28px;
    }

    If you wrap that custom CSS with a media query, your site title and tagline will then display smaller for mobile screens:

    @media all and (min-width: 800px) {
    
      .site-title {
        font-size: 40px;
      }
      .tagline {
        font-size: 28px;
      }
    }

    Hi Ben,
    Ok, I fixed that but when I do the same for the main page post titles to display smaller in mobile devices, it makes them smaller but not bold. It displays bold the post titles on the sidebars but not that of the main column.

    And the titles in single posts remain big on mobile devices as well. How can I make them smaller in mobiles?

    Theme Author Ben Sibley

    (@bensibley)

    Sorry I missed the part about the post titles too. This CSS can remain to keep them bold all the time:

    .post-title {
      font-weight: 700;
    }

    The current custom CSS is setting the post titles to be larger for all screens like this:

    .post-title {
      font-size: 30px;
    }

    You can move that code into the same media query used for the site title and tagline, like this:

    @media all and (min-width: 800px) {
    
      .site-title {
        font-size: 40px;
      }
      .tagline {
        font-size: 28px;
      }
      .post-title {
        font-size: 30px;
      }
    }

    Sorry Ben, but this code does not do the trick. This code makes post titles (in mobiles) in the main page to become smaller but not bold and the single post titles (in mobiles) to remain as they are displayed on the big, pc screens.

    Sorry, I made a mistake. It does do the trick for the main page post titles. What I need to adjust now, though, is the size of titles in single posts displayed on mobiles.

    Theme Author Ben Sibley

    (@bensibley)

    If you want to change the font size of the post titles on the single posts only at mobile screen widths you can use this CSS too:

    @media all and (max-width: 799px) {
    
      .post-title {
        font-size: 21px;
      }
    }

    Hi Ben,
    This last code doesn’t change anything.

    Hi Ben,
    Sorry, it’s because I use Elementor. I fixed it from there.

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.