How can I make my logo smaller on mobile view in Webflow without it affecting the size on other pages?

Published on

September 23, 2023

To make your logo smaller on the mobile view in Webflow without affecting its size on other pages, you can follow these steps:

Select the logo element: On the specific page where you want to adjust the logo size, select the logo element by clicking on it.
Access the Style tab: In the right-hand panel, click on the "Style" tab to access the styling options for the element.
Apply custom CSS: Scroll down to the "Custom Code" section and click on the "+" button to add a new custom code block. This will allow you to add custom CSS to target the logo specifically on this page.
Write CSS code: In the new custom code block, write the CSS code to target the logo element and adjust its size. For example, if you want to make the logo 50% smaller on mobile, you can use the following code:
```
@media (max-width: 767px) {
.logo-class {
width: 50%;
height: auto;
}
}
```
Replace .logo-class with the appropriate class or ID of your logo element. If you're not sure about the class or ID, you can inspect the logo element using your browser's developer tools.
Apply the custom CSS: Once you've written the CSS code, click on the "Apply" button to apply the custom CSS to the page.
Preview and adjust as needed: Preview the page in the Webflow designer to see the changes. If the logo size looks good on mobile, you can save and publish the changes. If it still needs further adjustment, you can go back to the custom code block and modify the CSS accordingly.

By following these steps, you can make your logo smaller on the mobile view in Webflow without affecting its size on other pages.