Difficulties implementing responsive add on

Hi,
I seem to be having some difficulties implementing the responsive add-on. Been trying to implement this for quite some time now but cant seem to get it working.

Ive been following this tutorial:
https://vaadin.com/book/-/page/themes.responsive.html


These are the steps that I have compeleted:

  1. Downloaded and copied the responsive add on JAR files into my WEB-INF/lib
  2. Added the following lines to my web.xml:

<servlet> <servlet-name>myapp</servlet-name> <servlet-class>com.vaadin.server.VaadinServlet</servlet-class> <init-param> <param-name>UI</param-name> <param-value>com.example.myapp</param-value> </init-param> <init-param> <description>myappWidgetset</description> <param-name>widgetset</param-name> <param-value>com.example.Myapp.widgetset.MyappWidgetset</param-value> </init-param </servlet 3. Modified this line in my Java code:

@VaadinServletConfiguration(productionMode = false, ui = MyappUI.class, widgetset="com.example.Myapp.widgetset.MyappWidgetset"); 4. Added this line to my ivy.xml:

<dependency org="com.vaadin.addon.responsive" name="responsive" rev="1.0.0.alpha4" />
  1. Cleaned server and compiled widgetset


Code:

My Java code:

Label heading = new Label("Welcome to my application"); heading.addStyleName("header1"); heading.addStyleName("h1"); Responsive.makeResponsive(heading); contentlayout.addComponent(heading); My myapp.scss code:

      .header1 {
          text-align: center;        
      }
     
       .header1[width-range~="0-320px"]
 {
          font-size: 1000px;
      }

But when I resize my browser window nothing happens.

Any help would be appreciated. Thank you!