xF2 Template Modifications XenForo 2-row Responsive banner area

[Nick]

XenForo 2-row Responsive banner area
You can sort in binary. You can add any destiny banner below. It is considered in mobile systems.



Working codes;
Sample HTML code to run in any template;

<!--[XGT]:Banner kutusu-->
        <div class="xgt-Banner-Kutusu">
            <ul class="xgt-konteyner">
                <li class="xgt-icerik">
                    <a href="#" target="_blank">
                        <img src="https://lh3.googleusercontent.com/uZUV1mqOTUMMJMU7RhPaMl3nizRy-jIyqs2p3YFeyQuZM50QDnqRosHIeZejl5fiDIg1S5FwtvR7rhbQEFqQNxPsuvxGhiAZWyRbPDY" alt="img acıklama" border="0">
                    </a>
                </li>
                <li class="xgt-icerik">
                    <a href="#" target="_blank">
                        <img src="https://www.google.com/logos/doodles/2016/adile-nasits-86th-birthday-6254011919368192-hp2x.jpg" alt="img acıklama" border="0">
                    </a>
                </li>
                <li class="xgt-icerik">
                    <a href="#" target="_blank">
                        <img src="https://www.google.com/logos/doodles/2016/adile-nasits-86th-birthday-6254011919368192-hp2x.jpg" alt="img acıklama" border="0">
                    </a>
                </li>
                <li class="xgt-icerik">
                    <a href="#" target="_blank">
                        <img src="https://lh3.googleusercontent.com/uZUV1mqOTUMMJMU7RhPaMl3nizRy-jIyqs2p3YFeyQuZM50QDnqRosHIeZejl5fiDIg1S5FwtvR7rhbQEFqQNxPsuvxGhiAZWyRbPDY" alt="img acıklama" border="0">
                    </a>
                </li>
            </ul>
        </div>

CSS codes will be added to the extra.less template.

// XGT Banner kutusu CSS]
.xgt-Banner-Kutusu
{
    .xgt-konteyner
    {   
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        justify-content: space-around;
        padding: 0;
        margin: 0;
        list-style: none;
      
       .xgt-icerik
        {           
            width: 50%;       
            padding: 5px;   
              
            @media (max-width: (@xf-responsiveMedium))
            {
                width: 100%;   
            }
          
            img
            {
                width: 100%;
                max-height: 100px;
            }       
        }   
    }
}