Responsive design – site branding section

• 

  sawsweehock · Member · Nov 30, 2015 at 2:22 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  I’m having some trouble making the top part of my site responsive.

  It’s the div class labelled .site-branding.

  I’ve used background-image and the image URL here, because using the Site Title, Tagline, and Logo customisation feature on WordPress only allows me to have a small thumbnail icon, and I want it too look more like a banner.

  Is there any way of making this responsive? I’ve tried using @media screen and it doesn’t seem to work.

  Thanks,

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Dec 1, 2015 at 12:51 am

  • Copy link

  This can be a bit of a challenge. Change your .site-branding rule to the following and see what you think.

  .site-branding {
      background-image: url("https://sawsweehockcentre.files.wordpress.com/2015/11/1214-lsesu-ssh-venue-artwork-late-2015-web-1180x1301.jpg");
      padding: 15px;
      background-size: contain;
      background-color: #2a2a2a;
      height: 100px;
  }

• 

  sawsweehock · Member · Dec 1, 2015 at 3:31 pm

  • Copy link

  Amazing, thanks so much. Seems to be working perfectly.

• 

  thesacredpath · Member · Dec 1, 2015 at 6:00 pm

  • Copy link

  You are welcome.