Benoit

Apply this code but pay attention on class name - blocks-list and  blocks-item .

Class name is same in the images which I have given above. 

.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}

.blocks-item {
  display: flex;
  flex: 1 0 340px; //you can change this flex property width for number of blocks
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}

If you want 3 blocks in one row side by side then flex property should be    flex: 1 0 340px 

If you want 4 blocks in one row side by side then flex property should be   flex: 1 0 240px

By using this given code your blocks will be mobile responsive.

If any issue let me know :)

Thank You

Team Diziana

Hey Juste

You can try this code for your given template design , I  edit this code at default Copenhagen theme .

Step 1 : At home.hbs page you have to remove these all code from line no - 1 to 5

And paste below code :

FAQ! Need help?


We've got you covered






Track my Order 
 
{{search class='search search-full'}}

Step 2 : At script.js  page you need to add this code bottom of the page :

 $("form.search input[type=submit]").attr("value", "TRACK");

Step 3 : At home.hbs page copy below code :

{{#is name 'Using Guide'}}

{{/is}}

{{#is name 'Business Rules'}}

{{/is}}

{{#is name 'Configuration'}}

{{/is}}

{{#is name 'Using Support'}}

{{/is}}

{{#is name "JUST GET STARTED?"}}

{{/is}}

{{#is name 'Getting Started'}}

{{/is}}

crossorigin="anonymous">

.hero{
background-color: #f8dfdf;
}

.blocks-item {
  border: 1px solid #f8dfdf;
  background-color: #f8dfdf;
  padding: 10px 0;
}

.blocks-item h4 {
  color: #000000 !important;
}

.blocks-item i.fas {
  font-size: 40px;
  margin-bottom: 10px;
  color: #000000;
}

.search {
  width: 100%;
  display: flex;
}

.hero {
  background-color: #f8dfdf;
  height: 100px;
}

.hero-inner {
  display: flex;
  max-width: 710px;
}

.hero-inner p {
  width: 30%;
  margin: 9px 0;
}

.header-text h1,
.header-text h3 {
  text-align: center;
  margin-bottom: 0;
  font-family: 'Dosis', sans-serif;
  font-weight: 500;
}

.header-text h3 {
  margin-bottom: 30px;
}

.hero-inner input[type="submit"] {
  background-color: #000000;
  min-width: 90px;
  margin-left: 11px;
  height: 40px;
  border-radius: 0;
}

.hero-inner input[type="submit"]:hover {
  background-color: #0000008c;
}

.search::before {
  display: none;
}

You can choose as per your requirements go to the google font website - https://fonts.google.com/ 
and choose any font-family.

Now you can see -

Thank You.