0

Не выходит написать медиа- запрос что бы при 320px происходило перестроение в 1 колонку. в добавок если я использую display:none;(данный блок обязательно нужно скрыть) картинка уходит в сторону. Прошу помощи

https://codepen.io/camobap6/pen/qBbNLgX

.root {
    min-width: 240px;
    max-width: 1280px;
    background-color: #2A2C2F;
    margin: 0 auto;
    font-family: 'Inter', Arial, sans-serif;
}

* {
    margin: 0;
}

h1 {
    border: 1px solid blue;
}

section {
    border: 1px solid purple;
}

div {
    border: 1px solid red;
}

h2 {
    border: 1px solid red;
}

img {
    border: 1px solid yellow;
}

h3 {
    border: solid 1px green;
}

.places {
    max-width: calc(100% - 296px);
    display: flex;
    flex-direction: column;
    padding-top: 92px;
    margin: 0 146px;
}

.place {
    margin: 0;
    margin-top: 80px;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(100px, 460px) minmax(100px, 484px);
    grid-template-rows: minmax(153px);
    grid-gap: 48px 40px;
}

.place:nth-child(1) {
    margin-top: 0;
}

.place__title {
    margin: 0px;
    color: white;
    font-weight: bold;
    font-size: 72px;
    line-height: 76px;
    align-self: flex-start;
    box-sizing: border-box;
    color: #FFFFFF;
}

.place__image {
    width: 100%;
    object-fit: cover;
  height:460px;
}

.place__paragraph {
    color: #FFFFFF;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1.4;
    margin: 0;
}

.place__paragraph:nth-of-type(2) {
    margin: 24px 0px;
}

.place__website {
    align-self: end;
    box-sizing: border-box;
}

.place__website-url-heading {
    margin: 0px;
    color: #AAAAAA;
    font-weight: normal;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.2em;
    height: 12px;
    margin-bottom: 12px;
}

.place__website-link {
    margin: 0 auto;
    color: white;
    font-weight: normal;
    font-size: 18px;
    line-height: 22px;
    max-width: 456px;
    height: 22px;
    color: #FFFFFF;
}
<div class=root>
<section class="places">
            <div class="place">
                <h2 class="place__title"> Куршская коса</h2>
                <div class="place__website">
                    <p class="place__website-url-heading">URL</p>
                    <a class="place__website-link" href="http://park-kosa.ru/">park-kosa.ru</a>
                </div>
                <img class="place__image" src="images/place-kosa.jpg" alt="">
                <div>
                    <p class="place__paragraph"> Здесь, посреди лесов и песчаных дюн, вы сможете увидеть два водных горизонта — спокойного Куршского залива с одной стороны и подёрнутого рябью волн Балтийского моря с другой. Уникальная природная зона на краю российского анклава.</p>
                    <p class="place__paragraph"> Здесь, посреди лесов и песчаных дюн, вы сможете увидеть два водных горизонта — спокойного Куршского залива с одной стороны и подёрнутого рябью волн Балтийского моря с другой. Уникальная природная зона на краю российского анклава.</p>
                </div>
            </div>


            <div class="place">
                <h2 class="place__title"> Кольский</h2>
                <div class="place__website">
                    <p class="place__website-url-heading">URL</p>
                    <a class="place__website-link" href="https://yourshot.nationalgeographic.com/photos/?keywords=kolskiy">National-Geographic</a>
                </div>
                <img class="place__image" src="images/place-kolsky.jpg" alt="">
                <div>
                    <p class="place__paragraph"> Почти весь полуостров находится за Полярным кругом. Саамская тундра, от которой на юг — тайга, а на север — Ледовитый океан, прикидывающийся Баренцевым морем.</p>
                    <p class="place__paragraph"> Возможно, вы смотрели Звягинцева и даже слышали историю арктического фестиваля в Териберке. Возможно, слово «Хибины» не осталось под снегом школьных воспоминаний об уроках географии. Возможно, вы не интересовались пронизывающей земную
                        кору сверхглубокой скважиной, а от апатитов вас давно накрывает апатия. Но ваша мечта увидеть северное сияние начинает сбываться с билетом в Мурманск.</p>
                </div>
            </div>


            <div class="place">
                <h2 class="place__title"> Алтай</h2>
                <div class="place__website">
                    <p class="place__website-url-heading">URL</p>
                    <a class="place__website-link" href="https://www.facebook.com/vera.bashmakova/posts/10156011613718822">Facebook</a>
                </div>
                <img class="place__image" src="images/place-altai.jpg" alt="">
                <div>
                    <p class="place__paragraph"> Алтай — одно из красивейших мест в России. В первую очередь из-за гор: если ехать вдоль хребта, вы увидите склоны, усыпанные соснами, горные реки и озёра. А если вы откроете в автомобиле окна, сможете познакомиться с невидимым чудом
                        здешних мест — горным воздухом.</p>
                    <p class="place__paragraph"> Климат на Алтае умеренный, поэтому ехать сюда лучше всего летом. Так вы увидите всё разнообразие местной флоры и фауны. По лесам Алтая бродят лоси, над хребтами летают орлы, а на равнинах пасутся косули. И знаменитые манулы — тоже
                        обитатели Алтайского края.</p>
                </div>
            </div>

            <div class="place">
                <h2 class="place__title"> Зимний байкал</h2>
                <div class="place__website">
                    <p class="place__website-url-heading">URL</p>
                    <a class="place__website-link" href="https://vk.com/baikalmile">https://vk.com/baikalmile</a>
                </div>
                <img class="place__image" src="images/place-winter-baikal.jpg" alt="">
                <div>
                    <p class="place__paragraph"> Всем известен Байкал как крупнейшее озеро в мире. Многие также знают, что это самый большой источник пресной воды и одно из красивейших мест в России.</p>
                    <p class="place__paragraph"> Конечно, это всё так. Но Байкал ещё идеальное место для соревнований по скийорингу. Это такой вид спорта, когда лыжник привязывает себя к мотоциклу, и тандем старается развить как можно бóльшую скорость на льду. В марте 2019 года на
                        фестивале «Байкальская миля» был поставлен мировой рекорд — 197.011 км/ч.</p>
                </div>
            </div>

            <div class="place">
                <h2 class="place__title"> Карелия</h2>
                <div class="place__website">
                    <p class="place__website-url-heading">URL</p>
                    <a class="place__website-link" href="http://vodlozero.ru">http://vodlozero.ru</a>
                </div>
                <img class="place__image" src="images/place-karelia.jpg" alt="">
                <div>
                    <p class="place__paragraph"> Сибирь заканчивается не на Урале, а в Карелии: образующая тайгу сибирская лиственница не растёт западнее Водлозера. Зато здесь она вымахивает на 30 метров — леса карельских национальных парков из-за непроходимых болот никогда не знали
                        топора. Некоторым соснам уже больше чем полтысячелетия. Прикоснитесь к живому существу, видевшему солнце раньше, чем увидал его Иван Грозный. В девственном лесу на сотню километров не встретишь тропы. А на редких тропинках деревья
                        в паре метров от земли помечены медвежьими когтями. Чтобы все знали, кто тут хозяин.</p>

                </div>
            </div>

        </section>
</div>

1 ответ 1

1

так пойдет ?

@media screen and (max-width:321px) {
  .place__website { display: none; }
  .places { max-width: 100%; display: block; margin: 0 15px; }
  .place { display: block; }
  .place__title { font-size: 28px; line-height: 30px; }
  .place__paragraph { font-size: 14px; text-align: justify; }
}
2
  • Да , вроде это то что надо. Спасибо
    – user389240
    14 июн 2020 в 23:27
  • значения уже под себя подстроите :)
    – Quotsu
    15 июн 2020 в 0:13

Ваш ответ

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