skip
Thursday , January 26 2023

Responsive Grid widget section In Blogger Template

Only CSS Responsive Grid Style Box

Code Setup Guideline: Go to Blogger Template Section > Edit HTML

  • Now find <b:skin><![CDATA[
  • Paste the given css code.

      /* Grid widget section start */
.card {
background-color: white;
color: #026fa4;
padding: 1rem;
border-radius: 4px;
box-shadow: 0 10px 20px 0 rgba(30,30,30,.07);
border: 1px solid #026fa4;
margin-top: 10px;
}
.card:hover {
  border: 1px solid blue;
  background-color:none;
}
.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(1, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(1, 1fr); }
}
@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

<div class=’cards’>

    <div class=’card’>
   <b:section class=’home-7′ id=’home-7’/>
     </div>
 
    <div class=’card’>
   <b:section class=’home-8′ id=’home-8’/>
     </div>  

    <div class=’card’>
   <b:section class=’home-9′ id=’home-9’/>
     </div>  
 
    <div class=’card’>
   <b:section class=’home-10′ id=’home-10’/>
     </div>
 
    <div class=’card’>
   <b:section class=’home-11′ id=’home-11’/>
     </div>  
 
    <div class=’card’>
   <b:section class=’home-12′ id=’home-12’/>
     </div>  
 
 </div>  

Live Demo

Check Also

Fully Customized Left Fixed Ads Holder For Desktop Preview

 <style> /* customized – Left Fixed Ads */@media (max-width: 868px) {  .left-fixed {    display:none;  }}.left-fixed …

0 0 votes
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
একজন লেখক হিসেবে এই সাইটে জয়েন করতে চান ?
আপনার লেখা পোষ্ট পাবলিশ করুন এবং সেই পোষ্ট থেকে অর্থ উপার্জন করুন
See More & Sign Up !