Logo in Mobile View

  • Resolved CMONLINDY

    (@cmonlindy)


    9 years, 2 months ago

    Hi Tomas,

    I’m working with your theme and getting into CSS. The tool has been a great learning springboard and starting point for a very clean site design.

    I am nearly finished with a site and having trouble getting the logo to appear in mobile views. I’m using the standalone Site Logo plug-in from Automattic (JetPack has caused the site to fail multiple times) and have already tried the CSS from a similar thread on this forum.

    I’m not using a child theme and am instead using Simple Custom CSS for updating code.

    Can you provide any insight into this problem?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Tomas Mackevicius

    (@tomasm)

    Hi, info is here:

    https://mtomas.com/389/tiny-forge-framework-child-themes-comprehensive-guide#Header-and-logo-configuration-options

    Thread Starter CMONLINDY

    (@cmonlindy)

    Thanks Tomas! I’m interested in now making the logo responsive. In order to get the site logo to appear in mobile view while not affecting the computer view (uncommenting just around Tip 14), I had to uncomment the following section of code. Can you tell me where to insert the lines
    .site-logo-link {
    width: 100%;
    }
    as instructed in your guide to the theme to have the width only affect the mobile view?

    Below is the entire section I had to uncomment:

    .site-logo-link {
    display: none;
    }
    .site-logo {

    }

    .site-branding {
    margin-top: 12px;
    margin-top: 0.75rem;
    }
    .site-logo-link {
    display: inline-block;
    float: left;
    margin: 5px 24px 0 0;
    margin: 0.3125rem 1.5rem 0 0;
    }
    #site-title-wrapper {
    padding: 12px 0 12px 12px;
    padding: 0.75rem 0 0.75rem 0.75rem;
    }
    .site-header .site-title,
    .site-header .site-title a {
    clear: none;
    display: inline;
    }
    .site-header .site-title,
    .site-header .site-description {
    text-align: left;
    }

    img.header-image,
    .site-header img.wp-post-image {
    margin-top: 24px;
    margin-top: 1.5rem;
    }

    Theme Author Tomas Mackevicius

    (@tomasm)

    You can just post that code in your custom CSS plugin, should work.

    Also if you want to have bigger logo, just upload bigger image.

    Thread Starter CMONLINDY

    (@cmonlindy)

    Hi Tomas, unfortunately when I paste the following code into the my custom CSS plugin, the logo on the computer version of the site becomes centered and the mobile view remains left-justified and not full-width. Is there any way to make the mobile logo and site responsive while maintaining the left-justification of the logo in the computer view? Did I change something incorrectly in the style sheet that flipped the two views?

    .site-logo-link {
    width: 100%;
    }

    Thread Starter CMONLINDY

    (@cmonlindy)

    Hi Tomas,
    Just making sure you got my last message. The logo is working in Mobile view when I uncomment the entire section of code noted in my second post above on the style sheet. However, the logo is not responsive in its mobile view — the site width seems to end at the left edge of the “Menu” dropdown in the upper right corner. Is there any way to make the Mobile logo responsive to fill the width of the screen but keep the computer logo left-justifed and the size it currently is?

    Thank you for your help.

    Theme Author Tomas Mackevicius

    (@tomasm)

    You could upload logo that is 960px wide.

    Overall in order for me to at least try help you I need access to your site.

    In any case the best thing is to use Firefox or Chrome code inspector, with its help you can see what rule affect the element.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Logo in Mobile View’ is closed to new replies.