How can I add custom CSS media queries to the Header in the custom code section in Webflow?

To add custom CSS media queries to the Header in the custom code section in Webflow, you can follow these steps:

1. Go to your Webflow project dashboard and open the project you want to work on.

2. Click on "Project Settings" in the left sidebar.

3. In the "Custom Code" tab, scroll down to the "Head Code" section.

4. Here, you can add your custom CSS media queries. You can use the `

```

Inside the media query, you can write your custom CSS code to style elements specifically for screens with a maximum width of 767 pixels.

6. Customize the CSS rules within the media query to suit your needs. You can target specific elements, apply different styles, or modify the layout based on the screen size or device orientation.

7. Save the changes to your project settings, and the custom CSS media queries will be applied to the `` section of your website.

Remember that when using custom CSS media queries, it's essential to test your website on different devices and screen sizes to ensure that the styles are rendering as expected. Additionally, be mindful of maintaining a responsive design by using mobile-first principles and progressively enhancing your layout and styles for larger screens.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

What is the maximum number of items that can be added to a collection in the Webflow Lite Account Plan?

What is the new feature that Webflow has announced for dividing layout/text into columns?

Is there a workaround for aligning content vertically in Webflow when there is just one line of text, without affecting the alignment of content with two lines of text?

How can I make my Webflow form block's success state display itself with the form elements still visible and the success message below it? I have done this in the past through custom code but can't find it now.

How can I fix the issue where hover transitions are not occurring on a Webflow website when one element is hidden using visibility and has a higher z-index than another element?

Is it possible to automatically load a new page and remove the previous one when the user reaches the bottom of the page on a Webflow site, like in this example?

How can I resolve the issue with Webflow displaying a blank page when trying to insert code from CodePen?

Is it possible to make a button on a Webflow page display a random item from a Collection without any page loads using custom Javascript and without exposing sensitive data or API keys to users?

Has there been an update or change of keys in Webflow to move a heading and image into the same grid box using the Ctrl + drag on Windows method mentioned in the Cards video of the Webflow 101 course?

How can I easily redirect my website to a specific URL with language detection using Webflow?

Can I make at least one checkbox in a group required in Webflow? If users don't select at least one checkbox, can I show an error message?

Can Webflow's Quick Stack be used as a full replacement for the grid, even though it lacks certain functions and features?

What could be the reason for the Menu Button Landing 3 not showing in Webflow's element settings and how can I fix it?

How can I create a transparent sticky_navbar on my Webflow homepage that changes to white on scroll down, along with the elements on the navbar also changing color? I have already created the two navs, but I am having trouble getting them to work properly. Thank you!

How do I make a contact-slide-in-sidebar scrollable in Webflow on mobile devices? Also, how can I coordinate the actions of two triggers so they don't bug when opening and closing the sidebar?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?

How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I make the menu close when a link is clicked in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I add user input to the end of the redirect URL in Webflow?