Responsive Layout is not working

package com.example.projnew;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.util.PropertysetItem;
import com.vaadin.server.Responsive;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.Form;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@SuppressWarnings("serial")
@Theme("projnew")
public class ProjnewUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = ProjnewUI.class)

public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {
CssLayout layout = new CssLayout();
layout.setSizeFull();
layout.setStyleName("flexwrap");
setContent(layout);
Responsive.makeResponsive(layout);

Label title = new Label("Space is big, Really big");
title.addStyleName("title");
layout.addComponent(title);

Label description = new Label("This is a "
+ "long description of the image shown "
+ "on the right or below, depending on the "
+ "screen width. The text here could continue long.");
description.addStyleName("itembox");
description.setSizeUndefined();
layout.addComponent(description);
}

}

My ScSS..

@import "addons.scss";
@import "projnew.scss";

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
/* The actual styles should be defined in projnew.scss */
.projnew {
@include addons;
@include projnew;

.flexwrap {
background: black;

&[width-range~="0-300px"] {
background: red;
}
}
}
 

Hello,

Are you defining those rules in styles.scss? If so, move them to your <theme-name>.scss file instead.

By default, the styles.scss file contains this line:
/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. *//* The actual styles should be defined in <theme-name>.scss */

Also, FWIW, the minimum width of the browsers I use all exceed 300px. If you can't see any changes, make sure that you can actually reach the breakpoints you set.

Thank you for your help sir.. It work and it help me alot.. now I can continue to my work..