How To Set Default Grid Mode In Fletro Pro Theme

Here, I will show you how to set the Default Grid Mode in the Fletro Pro Blogger Theme. Just follow the steps as shown in the below video.

Note: You should back up your Theme code before following the steps. So, in case if you make any mistake you can easily restore the previous versions quite easily.

The Process is a little bit complicated for beginners so do it carefully, otherwise you may break your website.

Here, I will Divide the steps into the 4 Steps.

Step-1: Place the code below the Body Tag.

<b:if cond='data:view.isMobile'> 
    <b:class cond='data:view.isMultipleItems' name='gridMode'/>
    </b:if>

Step-2: Make changes in the Body Code.

<b:if cond='data:view.isMultipleItems'>
            <div class='postMode' onclick='gridMode()'>
              <svg class='line svg-1' viewBox='0 0 24 24'><rect height='7' width='7' x='3' y='3'/><rect height='7' width='7' x='14' y='3'/><rect height='7' width='7' x='14' y='14'/><rect height='7' width='7' x='3' y='14'/></svg>
              <svg class='line svg-2' viewBox='0 0 24 24'><rect height='7' rx='2' ry='2' width='18' x='3' y='3'/><rect height='7' rx='2' ry='2' width='18' x='3' y='14'/></svg>
            </div>
            <script>/*<![CDATA[*/ (localStorage.getItem('list')) === 'listmode' ? document.querySelector('#mainContent').classList.remove('gridMode') : document.querySelector('#mainContent').classList.add('gridMode') /*]]>*/</script>
          </b:if>

Step-3: Make changes in the additional javascript.

 function gridMode(){localStorage.setItem("list","listmode"===localStorage.getItem("list")?"grid":"listmode"),
"listmode"===localStorage.getItem("list")?document.querySelector("#mainContent").classList.remove("gridMode"):document.querySelector("#mainContent").classList.add("gridMode")};

Step-4: Changes in the CSS Code (Optional)

.gridMode .blogPosts{width:calc(100% + 15px);left:-7.5px}

.gridMode .blogPosts .hentry{padding-bottom:30px;width:calc(100% - 15px);margin-left:7.5px;margin-right:7.5px}

.gridMode .blogPosts .hentry .postHeader, .gridMode .blogPosts .hentry .postInfo{font-size:14px}

.gridMode .blogPosts .hentry .postTitle{font-size:17px}

Note that the 4th step is optional here. I hope you have successfully set the default Grid Mode in the Fletro Pro theme.

If you still have doubts, you can ask me in the comment section of this video or on our Telegram Group. If you find this video helpful, feel free to Like the video and Subscribe to our Channel. Thank you.