0

Всем здравствуйте. Нужно решение для двух проблем:

Во-первых, помогите, пожалуйста с отступами, которые образовались между двумя контейнерами (после кнопки "Find out more about us"). Полагаю, это проблема схлопывающихся отступов.

Во-вторых, подскажите, как сделать так, чтобы расположить надпись "Full-time" и соответствующий ей checkbox ровно (!) в один ряд, а под ним "Part-time/Casual/Freelance" с уже его checkbox. То есть чтобы смотрелось нормально, а не вот так в кашу.

введите сюда описание изображения введите сюда описание изображения

@media screen and (min-width: 320px) and (max-width: 568px) {
    body, ul, h1 {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
    }
    header {
        height: 700px;
        background: url(bg-img.png) no-repeat center top / cover;
    }
    .wrapper {
        position: relative;
        overflow-x: hidden;
    }
    .menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 30%;
        height: 100vh;
        background-color: #fff;
        transition: 0.5s;
        transform: translateX(-100%);
    }
    .menu-active {
        transform: translateX(30%);
    }
    .menu-list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        height: 50%;
    }
    .menu-list li {
        list-style-type: none;
    }
    .menu-list a {
        text-decoration: none;
        text-transform: uppercase;
    }
    .menu-btn {
        position: absolute;
        top: 10px;
        right: -35px;
        width: 30px;
        height: 30px;
        background-color: black;
    }
    .search-form h1 {
        font-size: 1.9rem;
        font-style: italic;
        font-weight: 100;
        text-align: center;
        color: #fff;
        margin-top: 150px;
    }
    form {
        width: 180px;
        margin: 50px auto;
    }
    form input {
        border-style: none;
        height: 7vh;
        width: 55vw;
    }
    input[type="checkbox"] {
        width: 30px;
        height: 30px;
    }
    form select {
        border-style: none;
    }
    .button {
        color: white;
        display: block;
        padding: 15px;
        border-style: none;
        margin: 50px auto;
        background-color: #4acaff;
    }
    .container-1 {
        position: relative;
        background-color: #f5f5f5;
        padding-top: 70px;
    }
    .inner-container-1 {
        text-align: center;
        margin-top: 70px;
    }
    .container-1 span {
        font-size: 2rem;
        font-style: italic;
    }
    .container-1 h1 {
        position: relative;
        padding-bottom: 40px;
    }
    .container-1 .blue {
        position: absolute;
        transform: translateX(-50%);
        bottom: 0;
        left: 50%;
        width: 140px;
        height: 5px;
        background-color: #4acaff;
    }
    .container-1 p {
        font-size: 1rem;
        margin-top: 50px;
    }
    .btn {
        display: block;
        padding: 10px;
        color: #6cd3fd;
        text-decoration: none;
        font-weight: bold;
        background-color: #fff;
        border: 3px solid #6cd3fd;
        margin: 50px auto;
        border-radius: 15px;
        width: 45vw;
    }
    .container-2 {
        height: 300vh;
        background-color: #131c25;
    }
    .inner-container-2 {
        text-align: center;
        color: #fff;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet">
    <link href="normalize.css" rel="stylesheet">
    <title>Freebie</title>
</head>
<body>
    <header>
        <div class="wrapper">
            <div class="menu">
                <a href="#" class="menu-btn"></a>
                <nav class="menu-list">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Jobs</a></li>
                    <li><a href="#">Clients</a></li>
                    <li><a href="#">Employers</a></li>
                    <li><a href="#">Contact us</a></li>
                </nav>
            </div>
        </div>
        <div class="search-form">
            <h1>I'm looking for...</h1>
            <form>
                <input type="text" name="job-searching" placeholder="Enter a job description">
                        <label for="full-time" class="light">Full Time</label><br>
                        <input type="checkbox" id="full-time" value="full_time" name="type-of-work">
                        <label for="part-time" class="light">Part time / Casual / Freelance</label>
                        <input type="checkbox" id="part-time" value="part_time" name="type-of-work">
                <select name="location" placeholder="Select your location">
                    <option value="" disabled selected>Select your option</option>
                    <option value="the-USA">The USA</option>
                    <option value="canada">Canada</option>
                    <option value="germany">Germany</option>
                    <option value="france">France</option>
                    <option value="great-britain">Great Britain</option>
                </select>
            </form>
            <button class="button" type="submit">Search</button>
        </div>
    </header>
    <div class="container-1">
        <div class="inner-container-1">
                    <span>We're leaders in</span>
                    <h1><span class="blue"></span>Creative Digital Recruitment</h1>
                    <p>Based in Surry Hills, the creative hub of Sydney we are surrounded by creativity<br/>
                            and that reflects on the type of jobs we recruit for.</p>
                            <a class="btn" href="#">Find out more about us!</a>
        </div>
        </div>
        <div class="container-2">
            <div class="inner-container-2">
                <span>Subscribe to our Job Seeker Mailing List</span>
            </div>
        </div>
</body>
</html>

0

1 ответ 1

0

Что бы label и input выровнять на одной линии я объеденил их в один тег параграфа и стилизовал на flexbox

Схлопнутые наружные отступы - это изестный хак , задаём border-bottom:1px solid transparent и тогда ваш блок встанет до самого низа ...

Рабочий пример в песочнице: https://codepen.io/topicstarter/pen/VRrEYo

Так как медиазапрос не совпадает с размером сниппета то работать здесь это не будет ...

@media screen and (min-width: 320px) and (max-width: 568px) {
  * {
    box-sizing: border-box;
  }
  html,
  body,
  ul,
  h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
  }
  header {
    background: url(https://roomester.ru/wp-content/uploads/2018/06/dizayn_ofisa_3_06233929.jpg) no-repeat center top / cover, #34336dad;
    border-bottom: 1px solid transparent;
    background-blend-mode: darken;
  }
  .wrapper {
    position: relative;
    overflow-x: hidden;
  }
  .menu {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 30%;
    height: 100vh;
    background-color: #fff;
    transition: 0.5s;
    transform: translateX(-100%);
  }
  .menu-active {
    transform: translateX(30%);
  }
  .menu-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    height: 50%;
  }
  .menu-list li {
    list-style-type: none;
  }
  .menu-list a {
    text-decoration: none;
    text-transform: uppercase;
  }
  .menu-btn {
    position: absolute;
    top: 10px;
    right: -35px;
    width: 30px;
    height: 30px;
    background-color: black;
  }
  .search-form h1 {
    font-size: 1.9rem;
    font-style: italic;
    font-weight: 100;
    text-align: center;
    color: #fff;
    margin-top: 150px;
  }
  form {
    width: 180px;
    margin: 50px auto;
  }
  form input {
    border-style: none;
    height: 7vh;
    width: 55vw;
  }
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }
  form select {
    border-style: none;
  }
  .button {
    color: white;
    display: block;
    padding: 15px;
    border-style: none;
    margin: 50px auto;
    background-color: #4acaff;
  }
  .container-1 {
    position: relative;
    background-color: #f5f5f5;
    padding-top: 70px;
    margin-bottom: 0;
    border-bottom: 1px solid transparent;
  }
  .inner-container-1 {
    text-align: center;
    margin-top: 70px;
  }
  .container-1 span {
    font-size: 2rem;
    font-style: italic;
  }
  .container-1 h1 {
    position: relative;
    padding-bottom: 40px;
  }
  .container-1 .blue {
    position: absolute;
    transform: translateX(-50%);
    bottom: 0;
    left: 50%;
    width: 140px;
    height: 5px;
    background-color: #4acaff;
  }
  .container-1 p {
    font-size: 1rem;
    margin-top: 50px;
  }
  .btn {
    display: block;
    padding: 10px;
    color: #6cd3fd;
    text-decoration: none;
    font-weight: bold;
    background-color: #fff;
    border: 3px solid #6cd3fd;
    margin: 50px auto;
    border-radius: 15px;
    width: 45vw;
  }
  .container-2 {
    height: 300vh;
    background-color: #131c25;
    margin-top: 0;
  }
  .inner-container-2 {
    text-align: center;
    color: #fff;
  }
  form p {
    background: rgba(0, 0, 0, 0.3);
  }
  form label,
  form input {
    vertical-align: middle;
    white-space: nowrap;
    font-size: 12px;
    color: #fbfbfb;
  }
  form p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="style.css" rel="stylesheet">
  <link href="normalize.css" rel="stylesheet">
  <title>Freebie</title>
</head>

<body>
  <header>
    <div class="wrapper">
      <div class="menu">
        <a href="#" class="menu-btn"></a>
        <nav class="menu-list">
          <li><a href="#">Home</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="#">Jobs</a></li>
          <li><a href="#">Clients</a></li>
          <li><a href="#">Employers</a></li>
          <li><a href="#">Contact us</a></li>
        </nav>
      </div>
    </div>
    <div class="search-form">
      <h1>I'm looking for...</h1>
      <form>
        <input type="text" name="job-searching" placeholder="Enter a job description">
        <p>
          <label for="full-time" class="light">Full Time</label>
          <input type="checkbox" id="full-time" value="full_time" name="type-of-work">
        </p>
        <p>
          <label for="part-time" class="light">Parttime/Casual/Freelance</label>
          <input type="checkbox" id="part-time" value="part_time" name="type-of-work">
        </p>
        <select name="location" placeholder="Select your location">
          <option value="" disabled selected>Select your option</option>
          <option value="the-USA">The USA</option>
          <option value="canada">Canada</option>
          <option value="germany">Germany</option>
          <option value="france">France</option>
          <option value="great-britain">Great Britain</option>
        </select>
      </form>
      <button class="button" type="submit">Search</button>
    </div>
  </header>
  <div class="container-1">
    <div class="inner-container-1">
      <span>We're leaders in</span>
      <h1><span class="blue"></span>Creative Digital Recruitment</h1>
      <p>Based in Surry Hills, the creative hub of Sydney we are surrounded by creativity<br/> and that reflects on the type of jobs we recruit for.</p>
      <a class="btn" href="#">Find out more about us!</a>
    </div>
  </div>
  <div class="container-2">
    <div class="inner-container-2">
      <span>Subscribe to our Job Seeker Mailing List</span>
    </div>
  </div>
</body>

</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.