Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Size-dependent position of logo

Home Forums Support Size-dependent position of logo

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #39986
    Jack Sankey

    Hi all,

    In order to get an inline logo with my website’s text, I used the following CSS:

    /* putting the site logo to the left of the title */
    .site-branding {
          display: inline-block;
    }
    
    .site-logo {
          float: left;
          margin-right: 20px;
    }
    

    This works. Now, however, when I resize the website (or view with a phone) I’d like to change it from left-justified (when large) to centered (when small), at exactly the same time as the title text itself changes to centered. Is this possible with some logic-based css or anything?

    Jack

    PS- Best template ever. It’s a great idea to make something that looks sharp immediately and then enable us n00bs via this forum.

    #39987
    Jack Sankey

    Oop, never mind! This works:

    @media screen and (max-width: 768px) {
      .site-logo {display: none;}
    }
    #40028
    Tom
    Lead Developer
    Lead Developer

    Perfect – using @media queries are definitely the way to go 🙂

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