How to change logo size by screen width

Community Forums Forums Design Tips and Tricks How to change logo size by screen width

This topic is: not resolved

This topic contains 1 reply, has 1 voice, and was last updated by  idougal 1 year, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #95500


    I created

    The default logo size was too small and I followed some tips from the forum to get a bigger logo on the screen. Most of the suggestions used a background image, but the header slider and the logo would overlap when the screen width shrunk so I changed the actual logo size instead (See changes to original code below). all of the fixes I have found on the forum pertain to background images, which I do not want to use.

    I would like to switch to a less horizontal logo when the screen width is less than 480px, and I assume I need to create a “@media only screen and (max-width: 480px) {” area in my css.

    What specific code in that section will over-write the default logo with a logo I upload?

    Thanks for your help!

    This is a description of the problem from the tester:

    Between 755 and 1010 pixels width, we have a serious problem — logo gets cut off on the left side.

    Below 755 pixels width, we want to use a different logo.

    Site Header

    .site-header .wrap {
    padding: 5px 0;
    padding: 0.5rem 0;

    /* Title Area
    ——————————————— */

    .title-area {
    float: left;
    padding: 0 0 4px;
    padding: 0 0 0.4rem;
    width: 840px;

    .header-image .site-title > a {
    background-position: top !important;
    float: left;
    min-height: 175px;
    width: 100%;

    /* Widget Area
    ——————————————— */

    .site-header .widget-area {
    float: right;
    text-align: center;
    width: 290px;

    @media only screen and (max-width: 1023px) {

    .site-header .wrap {
    padding: 40px 0;
    padding: 4rem 0;


    I should also add the change to the functions.php to make a larger logo.

    //* Add support for custom header
    add_theme_support( ‘custom-header’, array(
    ‘header-selector’ => ‘.site-title a’,
    ‘header-text’ => false,
    ‘height’ => 175,
    ‘width’ => 840,
    ) );

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.