Smaller logo for mobile site

gertjan
Inactive member
Topic Author
New Member

6 years 8 months ago #47266 by gertjan

Smaller logo for mobile site was created by gertjan

Is it possible to show an other (smaller) logo when viewing the site on mobile/responsive version?
My own logo is alright when viewing the site on a computer... but is to big for the mobile/responsive version...

Kind regards,
GertJan

Please Log in to join the conversation.

milos
Support Staff
Moderator

6 years 8 months ago #47267 by milos

Replied by milos on topic Smaller logo for mobile site

Yes, you can add this CSS code to change size of the logo text only on smaller screens:

Code:

@media (max-width:767px) {
  .sparky_logo {
    font-size: 18px;
  }
}

The above code will make logo text to 18px only on devices that have width less than 767px.

Best regards,
Milos

Please Log in to join the conversation.

gertjan
Inactive member
Topic Author
New Member

6 years 8 months ago #47268 by gertjan

Replied by gertjan on topic Smaller logo for mobile site

A step in the right direction Milos

Thanks.

I don't use text as my logo, i made a png as my logo... When I change the above code will this also change my PNG logo?

Please Log in to join the conversation.

milos
Support Staff
Moderator

6 years 8 months ago #47269 by milos

Replied by milos on topic Smaller logo for mobile site

You can use this for logo image:

Code:

@media (max-width:767px) {
  .sparky_logo_image img {
    max-width:100px;
    height:auto;
  }
}

In the above example, maximum width of the logo image is 100px.

Please Log in to join the conversation.

Time to create page: 0.213 seconds