debut theme mobile responsive make full row using of shopify grid layout

Highlighted
Shopify Expert
65 2 5

I want to show a mobile layout full grid item.

I used small--one-full but it does not work . below I added code 

 

<div class="grid grid--no-gutters grid--table site-header__mobile-nav">
      

      
      
        <div class="grid__item medium-up--one-third small--one-half medium-up--one-quarter-- desktop-search--">
        
          <div id="Search_bar" class="" role="dialog" aria-modal="true" aria-label="Search anything" data-predictive-search-drawer="">
  <div class="search-bar__interior--">
    <div class="search-form__container" data-search-form-container="">
      <form class="search-form search-bar-top__form" action="/search" method="get" role="search">
        <div class="search-form__input-wrapper">
          <input type="text" name="q" id="boost-pfs-search-box-1" placeholder="Search" role="combobox" aria-autocomplete="list" aria-owns="predictive-search-results" aria-expanded="false" aria-label="Search" aria-haspopup="listbox" class="search-form__input search-bar__input boost-pfs-search-box ui-autocomplete-input" data-predictive-search-drawer-input="" data-search-box="boost-pfs-search-box-1" aria-live="assertive" autocomplete="off">
          <input type="hidden" name="options[prefix]" value="last" aria-hidden="true">
          <div class="predictive-search-wrapper predictive-search-wrapper--drawer" data-predictive-search-mount="drawer"></div>
        </div>

        <button class="search-bar__submit search-form__submit" type="submit" data-search-form-submit="">
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"><path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"></path></svg>
          <span class="icon__fallback-text">Submit</span>
        </button>
      </form>

    
    </div>
  </div>
</div>


        </div>
      	
       

      <div class="grid__item medium-up--one-third small--one-half">
        
        
          <div class="h2 site-header__logo">
        
          
<a href="/" class="site-header__logo-image site-header__logo-image--centered">
              
              <img class="js lazyautosizes lazyloaded" src="//cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_300x300.png?v=1604390781" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="1.611243072050673" data-sizes="auto" alt="Bloomleys Limited" style="max-width: 180px" data-srcset="//cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_180x.png?v=1604390781 180w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_360x.png?v=1604390781 360w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_540x.png?v=1604390781 540w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_720x.png?v=1604390781 720w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_900x.png?v=1604390781 900w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_1080x.png?v=1604390781 1080w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_1296x.png?v=1604390781 1296w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_1512x.png?v=1604390781 1512w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_1728x.png?v=1604390781 1728w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_2048x.png?v=1604390781 2048w" sizes="83px" srcset="//cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_180x.png?v=1604390781 180w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_360x.png?v=1604390781 360w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_540x.png?v=1604390781 540w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_720x.png?v=1604390781 720w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_900x.png?v=1604390781 900w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_1080x.png?v=1604390781 1080w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_1296x.png?v=1604390781 1296w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_1512x.png?v=1604390781 1512w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_1728x.png?v=1604390781 1728w, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_2048x.png?v=1604390781 2048w">
              <noscript>
                
                <img src="//cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_180x.png?v=1604390781"
                     srcset="//cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_180x.png?v=1604390781 1x, //cdn.shopify.com/s/files/1/0501/7921/1428/files/bloomleys-logo_180x@2x.png?v=1604390781 2x"
                     alt="Bloomleys Limited"
                     style="max-width: 180px;">
              </noscript>
            </a>
            
          
        
          </div>
        
        <div class="medium-up--one-whole"><p class="logo-text"> The Cocktail Inspired, Flower Delivery Company</p></div>
      </div>

      

      <div class="grid__item  medium-up--one-third small--one-full   --site-header__icons site-header__icons--plus  my-occasions-icon">
        <div class="site-header__icons-wrapper">

      <div class="hides-- my-occasions-text">
        <svg class="blink" width="50" height="50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 302.816 302.816" style="enable-background:new 0 0 302.816 302.816;" xml:space="preserve">
          <path id="XMLID_2_" d="M241.053,78.136c0.01-0.224,0.031-0.448,0.03-0.672c0-0.345-0.024-0.686-0.049-1.027  c-0.01-0.141-0.01-0.283-0.023-0.424c-0.032-0.322-0.086-0.638-0.138-0.955c-0.027-0.166-0.045-0.332-0.077-0.496  c-0.054-0.271-0.127-0.535-0.196-0.801c-0.053-0.21-0.1-0.422-0.162-0.631c-0.064-0.21-0.145-0.414-0.217-0.621  c-0.091-0.257-0.176-0.516-0.281-0.769c-0.064-0.157-0.144-0.306-0.213-0.46c-0.133-0.29-0.262-0.581-0.413-0.864  c-0.07-0.131-0.153-0.254-0.227-0.384c-0.166-0.29-0.33-0.581-0.518-0.862c-0.144-0.216-0.307-0.418-0.461-0.626  c-0.134-0.18-0.256-0.365-0.399-0.54c-0.317-0.39-0.655-0.762-1.012-1.119c-0.002-0.002-0.004-0.005-0.006-0.007L174.208,4.393  c-5.857-5.858-15.355-5.858-21.213,0c-5.858,5.857-5.858,15.355,0,21.213l35.13,35.13c-59.791,5.858-111.389,50.117-123.7,112.007  c-4.736,23.817-3.136,48.02,4.125,70.432c0.112,0.348,0.215,0.7,0.331,1.047c6.663,20.032,17.873,38.595,33.157,54.118  c0.614,0.624,1.276,1.167,1.964,1.66c2.601,1.866,5.658,2.816,8.726,2.816c0.475,0,0.95-0.022,1.423-0.067  c3.313-0.314,6.545-1.727,9.101-4.244c5.903-5.813,5.977-15.31,0.164-21.213c-3.604-3.66-6.909-7.542-9.926-11.598  c-18.44-24.791-25.755-56.355-19.64-87.097c9.72-48.866,50.676-83.772,97.979-88.071l-38.835,38.836  c-5.858,5.858-5.858,15.355,0,21.213c2.929,2.929,6.768,4.394,10.607,4.394c3.839,0,7.678-1.464,10.606-4.394l62.41-62.411  c0.022-0.022,0.045-0.046,0.067-0.068l0.007-0.006c0.013-0.013,0.023-0.027,0.036-0.04c0.338-0.339,0.659-0.694,0.963-1.065  c0.088-0.106,0.162-0.219,0.246-0.327c0.217-0.279,0.432-0.559,0.629-0.854c0.115-0.172,0.213-0.351,0.32-0.527  c0.146-0.24,0.296-0.476,0.429-0.725c0.125-0.234,0.232-0.475,0.343-0.713c0.095-0.202,0.195-0.399,0.281-0.606  c0.128-0.308,0.233-0.622,0.34-0.936c0.051-0.15,0.11-0.295,0.156-0.448c0.128-0.421,0.231-0.847,0.321-1.275  c0.012-0.055,0.03-0.107,0.041-0.163c0.001-0.004,0.001-0.009,0.002-0.013c0.097-0.492,0.171-0.987,0.218-1.484  C241.041,78.652,241.041,78.394,241.053,78.136z"></path>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          </svg>
          <p>
          save 10% on your next order when  you add 5 occasions to your account!
        </p>

        <ul>
        <li>
          <a class="menu-btn " title=" save 10% on your next order when  you add 5 occasions to your account!" href="#">my occasions     	
          </a>
        </li>
      </ul>
      </div>
         

          
            <button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav" aria-expanded="false" aria-label="Menu">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-hamburger" viewBox="0 0 37 40"><path d="M33.5 25h-30c-1.1 0-2-.9-2-2s.9-2 2-2h30c1.1 0 2 .9 2 2s-.9 2-2 2zm0-11.5h-30c-1.1 0-2-.9-2-2s.9-2 2-2h30c1.1 0 2 .9 2 2s-.9 2-2 2zm0 23h-30c-1.1 0-2-.9-2-2s.9-2 2-2h30c1.1 0 2 .9 2 2s-.9 2-2 2z"></path></svg>
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 40 40"><path d="M23.868 20.015L39.117 4.78c1.11-1.108 1.11-2.77 0-3.877-1.109-1.108-2.773-1.108-3.882 0L19.986 16.137 4.737.904C3.628-.204 1.965-.204.856.904c-1.11 1.108-1.11 2.77 0 3.877l15.249 15.234L.855 35.248c-1.108 1.108-1.108 2.77 0 3.877.555.554 1.248.831 1.942.831s1.386-.277 1.94-.83l15.25-15.234 15.248 15.233c.555.554 1.248.831 1.941.831s1.387-.277 1.941-.83c1.11-1.109 1.11-2.77 0-3.878L23.868 20.015z" class="layer"></path></svg>
            </button>
          
        </div>

      </div>
    	
    </div>

 

 

 

0 Likes