Change Logo for Mobile: Stout theme

  • Resolved donvitodesign

    (@donvitodesign)


    4 years, 8 months ago

    I have a very wide logo so I can only fit the circle portion of the logo on the mobile view but I can fit the entire logo on the full size version.

    For the STOUT theme I’m using, how can I specify a different logo for the mobile version?

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

Viewing 1 replies (of 1 total)

  • Hello @donvitodesign,

    I understand you’re wanting to use different CSS styling on your logo image for mobile and desktop. This is something that will have to be targeted through a media query. You can add changes to CSS in Customize > Additional CSS. It would be similar to this:

    
@media screen and (min-width: 768px) {
.custom-logo-link img, body.home.title-tagline-hidden.has-header-image .custom-logo-link img, body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
    max-width: 30%;
    max-height: 20%;
  }
}

    You will want to target the min-width for the right screen size and he dimensions of your logo. You can find more info on @media here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    I hope this gets you pointed in the right direction for your logo.

    Regards,
    Daniel F.

    • This reply was modified 4 years, 6 months ago by dfeuster.
Viewing 1 replies (of 1 total)
  • The topic ‘Change Logo for Mobile: Stout theme’ is closed to new replies.