Дизайн FlexBox и пропорциональный текст - PullRequest
Новая
       59

Дизайн FlexBox и пропорциональный текст

0 голосов
/ 12 июля 2020

Я новичок ie в FLEX, но пытаюсь выполнить sh следующее. У меня есть поля с разделами там, где я хочу, но мне трудно поддерживать пропорции между ПОКУПКАМИ ОНЛАЙН и ПОДАЧЕЙ ПОДАЧИ ПОЛУЧЕНИЯ ПОДАЧИ в адаптивном режиме; Другими словами, я хочу, чтобы он выглядел одинаково (не сжимая и не растягиваясь), пока не дойдет до мобильного просмотра. Почти как «фиксированный» режим. Очевидно, он не работает и при расширении растягивается и сжимается. Может кто-нибудь помочь?

Представление DESKTOP должно выглядеть так: https://wbtfoundation.org/creativeViews/desktopView.png

Представление MOBILE должно выглядеть так: https://wbtfoundation.org/creativeViews/mobileView.png

CSS
#secondary {display:none}
.col-md-9 {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;}

/* home plate */
.homePlate {width:190px;height:190px;}
.homePlate img {border-top-right-radius: 20px 90px !important;}
.homePlateBG {background: #ffb600;}


.sectionOne {width:100%;height:262px;background: #ffb600;margin-top:50px;padding:20px;text-align:center;}
.sectionTwo {width:100%;height:100%;border:4px solid #ffffff;border-radius:2px;position:relative;display:block}
.sectionThree {width:55%;height:40%;border:4px solid #ffffff;border-radius:2px;margin:0 auto;position:relative;top:40px;display:block;display: flex;align-items: center;justify-content: center;flex-direction: column; text-align: center; }

.message {margin-top:-40px;position:relative;}

.headlineCall {color:#003666;font-size:4.2em;font-weight:700;background-color:#ffb600;border-left:6px solid #ffb600;border-right:0px solid #ffb600;text-transform:uppercase;font-family:'ubuntu', san-serif;letter-spacing:8px;display:inline-block;overflow-wrap:normal}
.selector {color:#003666;margin:0 auto;margin-top:-10px;font-size:27px;font-weight: 700;text-transform:uppercase;text-align:center;letter-spacing:4px;width:100%;display:block;}
#bulletMarks {font-size:33px;padding:2px;position:relative;}

.target {margin-top:55px;}
.target p {color:#003666;font-size:23px;font-weight:200;font-family:'ubuntu', san-serif;text-align:center;width:100%;margin-top:-10px;}
.learnMore {color:#003666;font-weight:700 !important;text-transform:uppercase;text-decoration:underline;}
    .target p .learnMore .fa {font-size:24px;text-decoration:none !iimportant;margin-top:-20px;}
    .pointer {}


/* MEDIA QUERIE */
@media only screen and (max-width:767px) {
.sectionOne {width:100%;min-height:350px;background: #ffb600;margin-top:50px;padding:10px;}
.sectionTwo {width:100%;height:100%;border:3px solid #ffffff;border-radius:2px;display:block}
.sectionThree {width:85%;height:15%;border:4px solid #ffffff;border-radius:2px;margin:0 auto;position:relative;top:38%;display:block}

.message {margin-top:-25px;position:relative;}

.headlineCall {color:#003666;font-size:2.5em;font-weight:700;background-color:#ffb600;border-left:6px solid #ffb600;border-right:0px solid #ffb600;text-transform:uppercase;font-family:'ubuntu', san-serif;letter-spacing:5px;}
.selector {color:#003666;margin:0 auto;margin-top:-10px;font-size:15px;font-weight: 700;text-transform:uppercase;text-align:center;letter-spacing:1px;width:100%;display:block;}
    #bulletMarks {font-size:20px;padding:2px;position:relative;}

.target {margin-top:140px}
.target p {color:#003666;font-size:16px;font-weight:400;padding-left:10px;padding-right:10px;}
.learnMore {color:#003666;font-weight:700 !important;text-transform:uppercase;text-decoration:underline;}
    .target p .learnMore .fa {font-size:26px;text-decoration:none !iimportant;}
    .pointer {}

} 

HTML 

<div class="sectionOne">
   <div class="sectionTwo">

       <!-- promoted messaging -->
       <div class="sectionThree">
           <div class="message">
                <span class="headlineCall">buy online</span>
                    <!-- selector & bullets -->
                    <span class="selector">
                         <span>pickup <span class="feature-bullets" id="bulletMarks">&bull;</span> curbside <span class="feature-bullets" id="bulletMarks">&bull;</span> delivery</span>
                    </span>
           </div>
       </div>

      <!-- text here -->
      <div class="target">
          <p class="feature-text">Now offering Buy Online for pickup in store, pickup curbside and local store delivery.</p>
          <p class="learnMore">learn more <i class="fa fa-arrow-circle-right pointer"></i></p>
       </div>

   </div>
</div>
...