How can I add custom CSS media queries to the Header in the custom code section in Webflow?
TL;DR
- Access Project Settings in Webflow and select the Custom Code tab.
- Add your CSS media queries within
<style>tags in the Head Code section. - Save and publish your site, then test on different devices to ensure changes are effective.
Adding custom CSS media queries in Webflow can help you control the design for different screen sizes beyond the built-in breakpoints.
1. Access Project Settings
- Go to Project Settings from your Webflow dashboard.
- Select the Custom Code tab.
2. Add Custom Code to the Header
- In the Head Code section, add your CSS within
<style>tags. - Example:
<style> @media only screen and (max-width: 600px) { .your-class { display: none; } } </style>
3. Publish Changes
- Save your changes.
- Publish your site to make sure the media queries take effect on your live site.
4. Test Responsiveness
- Open your website on different devices or use the browser's developer tools to simulate screen sizes.
- Ensure your media queries are working as expected.
Summary
Add custom CSS media queries by editing the Head Code section in Webflow’s Project Settings, then wrap your CSS rules with <style> tags. Save and publish to see the changes in action.
