[Resolved] Size-dependent position of logo

[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.

[Jack Sankey]

Oop, never mind! This works:

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

[Tom]

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

[Author]

Posts