• Kay

  • 2020年06月19日 19:41

  Community Moderator

  Hi Anton,
  
  Yes this is possible if you are on a Plan that supports to edit the Help Center Theme in Zendesk Guide.
  It's a fairly easy CSS adjustment. Approximately a 5-min job for a front-end developer.
  
  

  - Kay

• Ifra Saqlain

  • 2020年06月20日 07:54

  Community Moderator

  Hey Anton,

  It just a play of breakpoints and flex properties. You have flex:1 0 370px or smething for your blocks width so you have to reduce that flex:1 0 240px or as required and may be there is breakpoints issue.

  See I did in copenhagen, I just reduce width of 

  .blocks-item{
  flex:1 0 200px
  }
  
  

  and modify media query code.

  

   

   

  You can also provide your blocks CSS code so I can modify the code as you have requirement.

   

  Thank You

  Team

• Pulkit Pandey

  • 2020年06月20日 16:25

  Community Moderator

  Hey Anton Van der meyden

  If it's possible to provide the URL of your current Help Center, So I will look at it and provide you the exact solution of your problem 

  Thanks 

  Pulkit

• Anton Van der meyden

  • 2020年07月15日 07:23

  Hello Everyone,

  Kay

  Ifra Saqlain

  Pulkit Pandey
  Thank you all for your assistance. I have been away and only got to view your response now.

  Pulkit. Here is the URL to my Help Center https://support.yapstone.com/hc/en-us

   

  Kind Regards,

  Anton

• Pulkit Pandey

  • 2020年07月17日 09:51

  Community Moderator

  Hi Anton Van der meyden

   

  Please, add the following code at the bottom of your style.css file 

   

  .blocks-item-link {
  color: rgba(0, 102, 202, 1);
  padding: 15px 15px;
  }
  
  .blocks-item {
  border: 1px solid rgba(0, 102, 202, 1);
  border-radius: 30px;
  box-sizing: border-box;
  color: rgba(0, 102, 202, 1);
  display: flex;
  flex: 0 0 160px;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
  }
  .knowledge-base .blocks-item-title {
  font-size:14px;
  }
  
  .blocks-item-description {
  display:none;
  }
  
  @media(min-width:) {
  
  .blocks-item-link {
  padding: 20px 30px;
  }
  
  .blocks-item-description {
  display:block;
  }
  
  .blocks-item {
  flex: 1 0 340px;
  }
  
  .knowledge-base .blocks-item-title {
  font-size:16px;
  }
  
  }
  
  
  

   

  I have hide the description of the block on a mobile device, if you want to show description on a mobile device please remove the code which is highlighted with bold.

   

  Please let me know if you have questions

   

  Thanks 

  Pulkit

   

   

   
• Anton Van der meyden

  • 2020年07月17日 15:25

  Hello Pulkit,

  Pulkit Pandey

  Thank you for your help and have  a nice weekend.

  Kind Regards,

  Anton

• Pulkit Pandey

  • 2020年07月17日 16:57

  Community Moderator

  Hey Anton Van der meyden

  Happy to hear that it works :)

  Thanks 

  Pulkit

サインインしてコメントを残してください。