Why is the block cropped at small screen resolutions? - html

Question

Why does the block get cropped at small screen resolutions? I have a picture and a background with a minimum width, but even if I change it to a minimum, nothing works
Code https://jsfiddle.net/sxn05j7k/
I done
enter image description here
right
enter image description here
Site ilyin1ib.beget.tech
jQuery(($) => {
const selectSingle = document.querySelector('.__select');
const selectSingle_title = selectSingle.querySelector('.__select__title');
const selectSingle_span = selectSingle.querySelector('.__select__title > span');
const selectSingle_labels = selectSingle.querySelectorAll('.__select__label');
selectSingle_title.addEventListener('click', () => {
if ('active' === selectSingle.getAttribute('data-state')) {
selectSingle.setAttribute('data-state', '');
} else {
selectSingle.setAttribute('data-state', 'active');
}
});
for (let i = 0; i < selectSingle_labels.length; i++) {
selectSingle_labels[i].addEventListener('click', (evt) => {
const {
alt,
src
} = evt.currentTarget.querySelector('img')
const imgNode = selectSingle.querySelector('img')
imgNode.alt = alt
imgNode.src = src
selectSingle_span.textContent = evt.currentTarget.textContent
selectSingle.setAttribute('data-state', '')
});
}
$(".phone_mask").mask("[phone]");
});
html,
body {
font-family: 'Montserrat', sans-serif;
line-height: 1;
scroll-behavior: smooth;
background-color: #E5E5E5;
box-sizing: border-box;
height: 100%;
width: 100%;
}
*, *::before, *::after {
box-sizing: border-box;
}
.wrapper {
max-width: 1280px;
padding: 40px 80px;
box-sizing: border-box;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.item {
display: flex;
text-align: center;
background-color: #fff;
box-shadow: 0px 24px 80px rgba(0, 0, 0, 0.1);
border-radius: 1px;
}
.col {
width: 50%;
height: 100%;
}
.img {
display: flex;
position: relative;
background: url(../img/big-bg.png) center no-repeat;
background-size: 100% 100%;
min-height: 500px;
min-width: 560px;
}
.img img {
position: absolute;
left: 10px;
right: 0;
bottom: 42px;
margin: auto;
}
.img-info {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
h1 {
font-weight: 700;
color: #fff;
font-size: 18px;
padding: 40px !important;
}
.img span {
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
color: #fff;
padding: 0 0 40px 40px;
}
.form-block {
text-align: center;
}
.title {
background-color: #F8F8F8;
padding: 20px 100px;
border-radius: 50px;
}
h2 {
font-weight: 800;
font-size: 30px;
color: #212121;
}
form {
padding: 50px 100px !important;
}
label {
text-transform: uppercase;
text-align: left;
width: 100%;
font-weight: 800;
font-size: 12px;
display: inline-block;
margin-bottom: 10px !important;
}
.green {
color: #428A60;
}
input {
display: block;
margin: 0 auto;
border: 1px solid #E4E4E4;
box-sizing: border-box;
border-radius: 5px !important;
background: #F8F8F8;
padding: 15px 20px;
width: 100%;
margin-bottom: 20px !important;
}
input::placeholder {
font-weight: 600;
font-size: 14px;
}
.phone-block {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
}
.phone-block input {
margin-bottom: 0 !important;
}
.number {
margin-right: 20px;
}
button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px;
background: #428A60;
border-radius: 5px !important;
border: none;
color: #fff;
cursor: pointer;
transition: 0.3s;
margin-bottom: 30px;
}
button i {
margin-left: 10px;
}
button:hover {
background-color: #3BC374;
color: #000;
}
.__select {
position: relative;
width: 118px;
height: 47px;
}
.__select[data-state="active"] .__select__title::before {
transform: translate(-3px, -50%) rotate(-45deg);
}
.__select[data-state="active"] .__select__title::after {
transform: translate(3px, -50%) rotate(45deg);
}
.__select[data-state="active"] .__select__content {
opacity: 1;
}
.__select[data-state="active"] .__select__label+.__select__input+.__select__label {
max-height: 40px;
border-top-width: 1px;
}
.__select__title {
display: flex;
align-items: center;
width: 100%;
height: 100%;
padding: 20px;
border-radius: 5px;
border: 1px solid #E4E4E4;
cursor: pointer;
background: #F8F8F8;
transition: 0.3s ease-out;
}
.__select__title::before,
.__select__title::after {
content: "";
position: absolute;
top: 50%;
right: 15px;
display: block;
width: 8px;
height: 2px;
transition: all 0.3s ease-out;
background-color: #333;
transform: translate(-3px, -50%) rotate(45deg);
}
.__select__title::after {
transform: translate(3px, -50%) rotate(-45deg);
}
.__select__title:hover {
border-color: #428A60;
}
.__select__title:hover::before,
.__select__title:hover::after {
background-color: #428A60;
}
.reset {
display: flex;
width: 230px;
padding: 8px 16px;
margin: 0 auto;
margin-bottom: 10px;
border: solid 1px #c7ccd1;
border-radius: 5px;
transition: all 0.2s ease-out;
cursor: pointer;
font-weight: bold;
background-color: #fff;
color: #333;
}
.reset:hover {
background-color: #428A60;
color: #fff;
}
.__select__content {
position: absolute;
top: 40px;
right: 0;
left: 0;
display: flex;
flex-direction: column;
background-color: #fff;
border: 1px solid #c7ccd1;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
transition: all 0.3s ease-out;
opacity: 0;
z-index: 8;
}
.__select__input {
display: none;
}
.__select__input:checked+label {
background-color: #dedede;
}
.__select__input:disabled+label {
opacity: 0.6;
pointer-events: none;
}
.__select__label {
display: flex;
align-items: center;
width: 100%;
height: 40px;
max-height: 0;
padding: 0 16px;
transition: all 0.2s ease-out;
cursor: pointer;
overflow: hidden;
}
.__select__label+input+.__select__label {
border-top: 0 solid #c7ccd1 60;
}
.__select__label:hover {
background-color: #428A60 !important;
color: #fff;
}
.flag span {
font-weight: 600;
font-size: 14px;
margin-right: 10px;
}
.flag img {
width: 26px;
height: 18px;
margin-right: 20px;
}
.secure {
display: none;
font-size: 14px;
font-weight: 700;
background: #F8F8F8;
width: 339px;
}
.secure i {
color: #428A60;
padding: 10px;
}
#media screen and (max-width: 1300px) {
input {
padding: 15px 10px;
}
.title {
background-color: #F8F8F8;
padding: 20px 80px;
border-radius: 50px;
}
}
#media screen and (max-width: 1200px) {
.img {
min-width: 460px;
}
h1 {
padding: 20px !important;
}
.img span {
padding: 0 0 20px 20px !important;
}
}
#media screen and (max-width: 1220px) {
.phone_mask {
padding: 15px 10px;
}
}
#media screen and (max-width: 1220px) {
.phone_mask {
padding: 15px 5px;
}
}
#media screen and (max-width: 1100px) {
.wrapper {
height: auto;
}
.item {
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
}
.col {
width: auto;
flex-direction: column;
}
.img {
background: url(../img/min-bg.png) center no-repeat;
background-size: 82%;
min-height: 430px;
}
.img img {
position: static;
width: 80%;
}
.img-info {
position: static;
flex-direction: row;
}
h1, .img span {
padding: 0 !important;
color: #212121 !important;
}
.title {
background-color: transparent;
padding: 0;
margin-bottom: 40px
}
form {
padding: 0 !important;
}
.number {
margin-right: 10px
}
.phone_mask {
padding: 15px 20px;
}
.secure {
display: block;
}
}
#media screen and (max-width: 991px) {
.img {
background-size: 82%;
min-height: 430px;
}
.img img {
width: 80%;
}
}
#media screen and (max-width: 768px) {
.img {
background-size: 72%;
min-height: 360px;
min-width: 320px;
}
.img img {
width: 70%;
}
}
#media screen and (max-width: 700px) {
.img {
min-height: 350px;
}
}
#media screen and (max-width: 650px) {
.img {
min-height: 320px;
}
}
#media (max-width: 630px) {
.img {
min-height: 300px;
background-size: 67%;
}
.img img {
width: 65%;
}
}
#media (max-width: 630px) {
.img {
min-height: 290px;
background-size: 67%;
}
.img img {
width: 65%;
}
}
#media (max-width: 630px) {
.img {
min-height: 290px;
background-size: 67%;
}
.img img {
width: 65%;
}
}
#media (max-width: 560px) {
.img {
min-height: 280px;
}
}
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/clear.css" rel="stylesheet" type="text/css" />
<link href="css/adaptive.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jquery.maskedinput#1.4.1/src/jquery.maskedinput.js" type="text/javascript"></script>
<script src="js/js.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#600;700;800&display=swap" rel="stylesheet">
<title>Редуслим</title>
</head>
<body>
<div class="wrapper">
<div class="item">
<div class="col img">
<div class="img-info">
<h1>Reduslim</h1>
<span>eco</span>
</div>
<img src="img/tablets.webp" alt="tablets">
</div>
<div class="col form-block">
<div class="title">
<h2>Сделай шаг<br>к выздоровлению</h2>
</div>
<form action="#" method="post">
<label for="name">ваше <span class="green">имя</span></label>
<input type="text" name="user_name" required id="name" placeholder="Алексей">
<div class="phone-block">
<div class="number">
<label for="phone">ваш <span class="green">телефон</span></label>
<input class="phone_mask" type="tel" name="user_phone" required id="phone" placeholder="[phone]">
</div>
<div class="__select" data-state="">
<div class="__select__title flag" data-default="Option 0">
<span>RU</span>
<img src="img/ru.svg" alt="ru">
</div>
<div class="__select__content">
<input id="singleSelect0" class="__select__input" type="radio" name="singleSelect" checked />
<label for="singleSelect0" class="__select__label">
</label>
<input id="singleSelect1" class="__select__input" type="radio" name="singleSelect" />
<label for="singleSelect1" class="__select__label flag">
<span>GR</span>
<img src="img/gr.svg" alt="gr">
</label>
<input id="singleSelect3" class="__select__input" type="radio" name="singleSelect" />
<label for="singleSelect3" class="__select__label flag">
<span>UK</span>
<img src="img/uk.svg" alt="">
</label>
<input id="singleSelect4" class="__select__input flag" type="radio" name="singleSelect" />
<label for="singleSelect4" class="__select__label flag">
<span>RU</span>
<img src="img/ru.svg" alt="ru">
</label>
</div>
</div>
</div>
<button>Заказать<i class="fas fa-arrow-right"></i></button>
</form>
</div>
<div class="secure">
<span>Trusted</span>
<span><i class="fas fa-lock"></i></span>
<span>Secure</span>
</div>
</div>
</div>
</body>

Answer 1

This happen because your <div class="secure"> has fixed width: width: 339px;.
Replace it with width: 100%; and max-width: 339px; and block will not crop anymore.
jQuery(($) => {
const selectSingle = document.querySelector('.__select');
const selectSingle_title = selectSingle.querySelector('.__select__title');
const selectSingle_span = selectSingle.querySelector('.__select__title > span');
const selectSingle_labels = selectSingle.querySelectorAll('.__select__label');
selectSingle_title.addEventListener('click', () => {
if ('active' === selectSingle.getAttribute('data-state')) {
selectSingle.setAttribute('data-state', '');
} else {
selectSingle.setAttribute('data-state', 'active');
}
});
for (let i = 0; i < selectSingle_labels.length; i++) {
selectSingle_labels[i].addEventListener('click', (evt) => {
const {
alt,
src
} = evt.currentTarget.querySelector('img')
const imgNode = selectSingle.querySelector('img')
imgNode.alt = alt
imgNode.src = src
selectSingle_span.textContent = evt.currentTarget.textContent
selectSingle.setAttribute('data-state', '')
});
}
$(".phone_mask").mask("[phone]");
});
html,
body {
font-family: 'Montserrat', sans-serif;
line-height: 1;
scroll-behavior: smooth;
background-color: #E5E5E5;
box-sizing: border-box;
height: 100%;
width: 100%;
}
*, *::before, *::after {
box-sizing: border-box;
}
.wrapper {
max-width: 1280px;
padding: 40px 80px;
box-sizing: border-box;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.item {
display: flex;
text-align: center;
background-color: #fff;
box-shadow: 0px 24px 80px rgba(0, 0, 0, 0.1);
border-radius: 1px;
}
.col {
width: 50%;
height: 100%;
}
.img {
display: flex;
position: relative;
background: url(../img/big-bg.png) center no-repeat;
background-size: 100% 100%;
min-height: 500px;
min-width: 560px;
}
.img img {
position: absolute;
left: 10px;
right: 0;
bottom: 42px;
margin: auto;
}
.img-info {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
h1 {
font-weight: 700;
color: #fff;
font-size: 18px;
padding: 40px !important;
}
.img span {
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
color: #fff;
padding: 0 0 40px 40px;
}
.form-block {
text-align: center;
}
.title {
background-color: #F8F8F8;
padding: 20px 100px;
border-radius: 50px;
}
h2 {
font-weight: 800;
font-size: 30px;
color: #212121;
}
form {
padding: 50px 100px !important;
}
label {
text-transform: uppercase;
text-align: left;
width: 100%;
font-weight: 800;
font-size: 12px;
display: inline-block;
margin-bottom: 10px !important;
}
.green {
color: #428A60;
}
input {
display: block;
margin: 0 auto;
border: 1px solid #E4E4E4;
box-sizing: border-box;
border-radius: 5px !important;
background: #F8F8F8;
padding: 15px 20px;
width: 100%;
margin-bottom: 20px !important;
}
input::placeholder {
font-weight: 600;
font-size: 14px;
}
.phone-block {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
}
.phone-block input {
margin-bottom: 0 !important;
}
.number {
margin-right: 20px;
}
button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px;
background: #428A60;
border-radius: 5px !important;
border: none;
color: #fff;
cursor: pointer;
transition: 0.3s;
margin-bottom: 30px;
}
button i {
margin-left: 10px;
}
button:hover {
background-color: #3BC374;
color: #000;
}
.__select {
position: relative;
width: 118px;
height: 47px;
}
.__select[data-state="active"] .__select__title::before {
transform: translate(-3px, -50%) rotate(-45deg);
}
.__select[data-state="active"] .__select__title::after {
transform: translate(3px, -50%) rotate(45deg);
}
.__select[data-state="active"] .__select__content {
opacity: 1;
}
.__select[data-state="active"] .__select__label+.__select__input+.__select__label {
max-height: 40px;
border-top-width: 1px;
}
.__select__title {
display: flex;
align-items: center;
width: 100%;
height: 100%;
padding: 20px;
border-radius: 5px;
border: 1px solid #E4E4E4;
cursor: pointer;
background: #F8F8F8;
transition: 0.3s ease-out;
}
.__select__title::before,
.__select__title::after {
content: "";
position: absolute;
top: 50%;
right: 15px;
display: block;
width: 8px;
height: 2px;
transition: all 0.3s ease-out;
background-color: #333;
transform: translate(-3px, -50%) rotate(45deg);
}
.__select__title::after {
transform: translate(3px, -50%) rotate(-45deg);
}
.__select__title:hover {
border-color: #428A60;
}
.__select__title:hover::before,
.__select__title:hover::after {
background-color: #428A60;
}
.reset {
display: flex;
width: 230px;
padding: 8px 16px;
margin: 0 auto;
margin-bottom: 10px;
border: solid 1px #c7ccd1;
border-radius: 5px;
transition: all 0.2s ease-out;
cursor: pointer;
font-weight: bold;
background-color: #fff;
color: #333;
}
.reset:hover {
background-color: #428A60;
color: #fff;
}
.__select__content {
position: absolute;
top: 40px;
right: 0;
left: 0;
display: flex;
flex-direction: column;
background-color: #fff;
border: 1px solid #c7ccd1;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
transition: all 0.3s ease-out;
opacity: 0;
z-index: 8;
}
.__select__input {
display: none;
}
.__select__input:checked+label {
background-color: #dedede;
}
.__select__input:disabled+label {
opacity: 0.6;
pointer-events: none;
}
.__select__label {
display: flex;
align-items: center;
width: 100%;
height: 40px;
max-height: 0;
padding: 0 16px;
transition: all 0.2s ease-out;
cursor: pointer;
overflow: hidden;
}
.__select__label+input+.__select__label {
border-top: 0 solid #c7ccd1 60;
}
.__select__label:hover {
background-color: #428A60 !important;
color: #fff;
}
.flag span {
font-weight: 600;
font-size: 14px;
margin-right: 10px;
}
.flag img {
width: 26px;
height: 18px;
margin-right: 20px;
}
.secure {
display: none;
font-size: 14px;
font-weight: 700;
background: #F8F8F8;
/*width: 339px;*/
max-width: 339px;
width: 100%;
}
.secure i {
color: #428A60;
padding: 10px;
}
#media screen and (max-width: 1300px) {
input {
padding: 15px 10px;
}
.title {
background-color: #F8F8F8;
padding: 20px 80px;
border-radius: 50px;
}
}
#media screen and (max-width: 1200px) {
.img {
min-width: 460px;
}
h1 {
padding: 20px !important;
}
.img span {
padding: 0 0 20px 20px !important;
}
}
#media screen and (max-width: 1220px) {
.phone_mask {
padding: 15px 10px;
}
}
#media screen and (max-width: 1220px) {
.phone_mask {
padding: 15px 5px;
}
}
#media screen and (max-width: 1100px) {
.wrapper {
height: auto;
}
.item {
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
}
.col {
width: auto;
flex-direction: column;
}
.img {
background: url(../img/min-bg.png) center no-repeat;
background-size: 82%;
min-height: 430px;
}
.img img {
position: static;
width: 80%;
}
.img-info {
position: static;
flex-direction: row;
}
h1, .img span {
padding: 0 !important;
color: #212121 !important;
}
.title {
background-color: transparent;
padding: 0;
margin-bottom: 40px
}
form {
padding: 0 !important;
}
.number {
margin-right: 10px
}
.phone_mask {
padding: 15px 20px;
}
.secure {
display: block;
}
}
#media screen and (max-width: 991px) {
.img {
background-size: 82%;
min-height: 430px;
}
.img img {
width: 80%;
}
}
#media screen and (max-width: 768px) {
.img {
background-size: 72%;
min-height: 360px;
min-width: 320px;
}
.img img {
width: 70%;
}
}
#media screen and (max-width: 700px) {
.img {
min-height: 350px;
}
}
#media screen and (max-width: 650px) {
.img {
min-height: 320px;
}
}
#media (max-width: 630px) {
.img {
min-height: 300px;
background-size: 67%;
}
.img img {
width: 65%;
}
}
#media (max-width: 630px) {
.img {
min-height: 290px;
background-size: 67%;
}
.img img {
width: 65%;
}
}
#media (max-width: 630px) {
.img {
min-height: 290px;
background-size: 67%;
}
.img img {
width: 65%;
}
}
#media (max-width: 560px) {
.img {
min-height: 280px;
}
}
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/clear.css" rel="stylesheet" type="text/css" />
<link href="css/adaptive.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jquery.maskedinput#1.4.1/src/jquery.maskedinput.js" type="text/javascript"></script>
<script src="js/js.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#600;700;800&display=swap" rel="stylesheet">
<title>Редуслим</title>
</head>
<body>
<div class="wrapper">
<div class="item">
<div class="col img">
<div class="img-info">
<h1>Reduslim</h1>
<span>eco</span>
</div>
<img src="img/tablets.webp" alt="tablets">
</div>
<div class="col form-block">
<div class="title">
<h2>Сделай шаг<br>к выздоровлению</h2>
</div>
<form action="#" method="post">
<label for="name">ваше <span class="green">имя</span></label>
<input type="text" name="user_name" required id="name" placeholder="Алексей">
<div class="phone-block">
<div class="number">
<label for="phone">ваш <span class="green">телефон</span></label>
<input class="phone_mask" type="tel" name="user_phone" required id="phone" placeholder="[phone]">
</div>
<div class="__select" data-state="">
<div class="__select__title flag" data-default="Option 0">
<span>RU</span>
<img src="img/ru.svg" alt="ru">
</div>
<div class="__select__content">
<input id="singleSelect0" class="__select__input" type="radio" name="singleSelect" checked />
<label for="singleSelect0" class="__select__label">
</label>
<input id="singleSelect1" class="__select__input" type="radio" name="singleSelect" />
<label for="singleSelect1" class="__select__label flag">
<span>GR</span>
<img src="img/gr.svg" alt="gr">
</label>
<input id="singleSelect3" class="__select__input" type="radio" name="singleSelect" />
<label for="singleSelect3" class="__select__label flag">
<span>UK</span>
<img src="img/uk.svg" alt="">
</label>
<input id="singleSelect4" class="__select__input flag" type="radio" name="singleSelect" />
<label for="singleSelect4" class="__select__label flag">
<span>RU</span>
<img src="img/ru.svg" alt="ru">
</label>
</div>
</div>
</div>
<button>Заказать<i class="fas fa-arrow-right"></i></button>
</form>
</div>
<div class="secure">
<span>Trusted</span>
<span><i class="fas fa-lock"></i></span>
<span>Secure</span>
</div>
</div>
</div>
</body>