I created a webpage that is functioning well and responsive on its own. However, when I integrate the same files with the Spring framework, the responsiveness of the webpage seems to be lost.
To ensure the responsiveness of the Spring webpage, I tested it by opening the page on mobile devices and using Chrome's inspect mode.
If you require more details, feel free to ask.
HTML File
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ page isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>URL Shortner</title>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />
<link type="text/css" rel="stylesheet"
href="${pageContext.request.contextPath}/resources/css/style.css" />
</head>
<body>
<div class="s130">
<form:form action="show" method="POST" onsubmit=" return continueornot();">
<h1>Short URL </h1>
<p>Paste your Long URL here</p>
<div class="inner-form">
<div class="input-field first-wrap">
<div class="svg-wrapper">
</div>
<input class="input-tag" id="search" type="text" name="longUrl" placeholder="Paste your Link here!" />
</div>
<div class="input-field second-wrap">
<input class="btn lco" type="submit" value="Search" />
</div>
</div>
<span id="error"></span>
<h2 id="urlerror">${link}</h2>
</form:form>
<footer>
</footer>
</div>
<script>
function validateEmail(email) {
var re = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
return re.test(email);
}
function continueornot() {
if(validateEmail(document.getElementById('search').value)){
// ok
}else{ urlerror.innerHTML = "<span style='color: red;'>"+
"Please enter a valid URL!</span>"
return false;}
}
</script>
</body>
</html>
MY CSS
body{
background: linear-gradient(to right, #fbfbfb, #cfc0c0);
color: #ffffff;
}
.container{
margin-left:20px;
}
h1{
font-size: 70px;
text-align: center;
margin-top: 8%;
margin-bottom: 5%;
color: #1f1f1f;
font-family: "montserrat";
}
h2{
font-size: 50px;
text-align: center;
margin-top: 2%;
margin-bottom: 5%;
color: #ffffff;
font-family: "montserrat";
}
span{
color: #1f1f1f;
font-size: 400;
font-weight: 900;
}
p{
text-align: center;
margin-top: -30px;
font-size: 18px;
letter-spacing: 3px;
}
.btn{
margin: auto;
display: block;
background-color: transparent;
border: 2px solid #1f1f1f;
border-radius: 0.6em;
color: #1f1f1f;
font-size: 1rem;
font-weight: 400;
padding: 1.2em 2.5em;
cursor: grab;
text-align: center;
text-transform: uppercase;
font-family: "montserrat";
font-weight: 900;
}
.btn:hover{
color:#ffffff;
outline: 0;
}
.lco{
transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
.lco:hover{
box-shadow: 0 0 40px 40px #1f1f1f inset;
}
.input-tag{
display: block;
margin : 20px auto;
padding: 10px;
border: 0;
border-radius:15px;
width:50%;
height:25px;
font-size: 20px;
font-family:inherit;
box-shadow:0 0 15px 4px rgba(0,0,0,0.06);
}
@media screen and (max-width: 600px){
h1{
font-size: 40px;
text-align: center;
margin-top: 12%;
margin-bottom: 12%;
color: #1f1f1f;
font-family: "montserrat";
}
p{
text-align: center;
margin-top: 40%;
font-size: 14px;
letter-spacing: 1px;
color: #1f1f1f;
}
h2{
font-size: 25px;
text-align: center;
margin-top: 8%;
margin-bottom: 5%;
color: #1f1f1f;
font-family: "montserrat";
}
.btn{
background-color: transparent;
margin-top: 7%;
border: 2px solid #1f1f1f;
border-radius: 0.6em;
color: #1f1f1f;
font-size: 1rem;
font-weight: 200;
padding: 0.5em 1.5em;
cursor: grab;
text-align: center;
text-transform: uppercase;
font-family: "montserrat";
font-weight: 500;
}
.input-tag{
display: block;
margin : 0px auto;
margin-top: 10%;
padding: 10px;
border: 0;
border-radius:15px;
width:70%;
height:24px;
font-size: 14px;
font-family:inherit;
text-align: center;
box-shadow:0 0 15px 4px rgba(0,0,0,0.06);
}
}
Project structure: