ettaluni2021-03-30 12:27:17
ettaluni, 2021-03-30 12:27:17

Adaptive layout(@media), is it possible to use not the screen width, but the dimensions of the parent element?

Good day. I need to make a responsive form, natively without plugins.
I wanted to make columns similar to what is in bootstrap.

@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;

But the form is a separate element, with its own, much smaller size. All elements should resize relative to it and not the size of the entire window. Is it possible to make media relative to the form tag and not screen

Answer the question

In order to leave comments, you need to log in

3 answer(s)
rusglov, 2018-04-10

It is possible through pseudo-class icon

Dmitry Zotov, 2018-04-10

    <i class="icon-right"/>

Fl_SparkyBooMan, 2018-04-10

<div class="btn>
<div class="btnContainer">
<div class="btnText"> Send Message </div> //текст кнопки
<div class="btnIco"> -> </div> //иконка кнопки, можно в виде знака, можно и в виде картинки

.btn {
width: 150px;  //задаешь свое значение длины
height: 50px;  //задаешь свое значение
padding: 10px;  //задаешь внутренний отступ для блока с классом btn
border-radius: 50%;   //задаешь окружность бордера
background-color: #fff;  //задаешь значение цвета фона кнопки
.btnContainer {
width: 100%;  //длина блока с классом btnContainer полностью заполняет блок btn
height: 100%;   //высота блока с классом btnContainer полностью заполняет блок btn
margin: 0 auto;  //выравниваем блок btnContainer по середине
text-align: center;  //выравниваем текст внутри блока btn container
.btnText {
width: 80%;
height: 100%;
float: left;  //стыковываем к левому краю
//далее оформляешь как хочешь

.btnIco {
width: 20%;
height: 100%;
float: right;  //стыковываем к правому краю
//далее оформляешь как хочешь

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question