Scale logo across different breakpoints (desktop, tablet, mobile)?

Site is akaya.io

I’d like to scale the size of the Akaya logo in the top left. (ie. Id like to have the logo have a 250px width on desktop and a 150px width on mobile)

How can I do this? It seems any changes i make to the size reflect on all breakpoints.

Thanks!

RC


Here is my public share link: LINK
(how to access public share link)

• view the designer at the breakpoint width you’d like to adjust the logo size at
• create an additional class for the logo at each breakpoint, i.e. logo 991, logo 767, logo 497
• set size for each class

Hey @cizzle & @CynicalKiddo you can just add a class name to the image, then change it’s width (under the style tab) at each breakpoint starting with the desktop breakpoint. :slight_smile: No need to add subclasses to an element unless you have multiple and want to make that element unique. :slight_smile:

3 Likes

Hey @cizzle

You can actually set one class. And then change the style of that class on each break point. You shouldn’t create new classes for each break point. Doing this will create a combo class on all break points unnecessarily.

1 Like

Thanks for clarifying!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.