1

I am a newbie to FLEX but am trying to accomplish the following. I've got my section boxes where I want, but am having a hard time trying to keep my BUY ONLINE and PICKUP CURBSIDE DELIVERY proportionate in responsive mode; in other words, I want it to look the same (not squeezing or stretching) until it get to the mobile view. Almost like a 'fixed' mode. Obviously it's not working and stretches and shrinks when expanding. Can someone please help?

The DESKTOP view should look like this: https://wbtfoundation.org/creativeViews/desktopView.png

The MOBILE view should look like this: 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">


   &lt;!-- promoted messaging --&gt;
   &lt;div class=&quot;sectionThree&quot;&gt;
       &lt;div class=&quot;message&quot;&gt;
            &lt;span class=&quot;headlineCall&quot;&gt;buy online&lt;/span&gt;
                &lt;!-- selector &amp; bullets --&gt;
                &lt;span class=&quot;selector&quot;&gt;
                     &lt;span&gt;pickup &lt;span class=&quot;feature-bullets&quot; id=&quot;bulletMarks&quot;&gt;&amp;bull;&lt;/span&gt; curbside &lt;span class=&quot;feature-bullets&quot; id=&quot;bulletMarks&quot;&gt;&amp;bull;&lt;/span&gt; delivery&lt;/span&gt;
                &lt;/span&gt;
       &lt;/div&gt;
   &lt;/div&gt;

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




</div>
</div>
FloMask
  • 21
  • 2

0 Answers0