0

I would like to have two different logos on the same website. One for large screen and one for small screen ( mobile devices )

I am using D8

Thank You

4

There are multiple ways to do this through CSS media queries. See example below.

.classname {
   @media all and (min-width: 768px) {
     background-image:url('image2.png');
   }
   @media all and (min-width: 320px) {
     background-image:url('image1.png');
   }
}

Helpful links

  1. Responsive Images
  2. Working with breakpoints

If you use the module and breakpoints from your theme you can probably just wrap the logo in a div class so you can control the padding or other CSS attributes. Just make sure to find the correct image styles per breakpoints and multipliers.

  • Thank You, Also I wanted to know. How to add retina images. Right now logo appears to slightly blurry on retina devices. – mazhar khan Nov 28 '17 at 10:05
  • 1
  • 1
    @mazharkhan since you are using Drupal 8, you can try to use Responsive Image module where it will pick up your themename.breakpoint.yml file and allow you to select what you set for the breakpoints where you have a multiplier for retina images. I updated my comment with links. – usernameabc Nov 28 '17 at 20:12
  • @mazharkhan what is the reason this is not marked as the best answer? – usernameabc May 17 '18 at 15:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.