Summary blog : Change Metadatas position

Site URL: http://www.qualitycupofcoffee.com/french

Hello everyone !

I am having a hard time coding stuffs.  I trying to align the metadata (tags & categories) of my summary block on the same line as my blog title :

- I created a summary blog for my course calendar ( id=floatsection ) that overlay on my previous banner. I am trying to align my metadata tags (date) & category (price) with my  title (course name). I would like to display everything on the same line as follows : (secondary metadata) tags - Title - Primary metadata category. However I cannot bring up the tags & categories. How can I do that ?

Here is my code so far :
 

/*Dates des formations box Overlay*/
#floatsection {
width: 30%;
  position: absolute;
  min-height: initial!important;
  z-index: 30;
  left: 80%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%,-50%);

  .Index-page-content {
    padding: 0em 0em;
  }

  & + section {
    padding-top: 90px;
  }
}
/*Fake summary podcast*/
/*LAYOUT & BACKGROUND COLOR*/
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item:nth-child(odd) {
  background: #f5ad9e;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item:nth-child(even) {
  background: #fffce9;
}
.sqs-gallery-design-list .sqs-gallery-meta-container {
  padding: 20px;
}
.sqs-gallery-design-list {
  max-width: 600px;
  margin: 0 auto;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container,
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
  margin: 10px;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
}
.sqs-gallery-design-list .sqs-gallery-image-container {
  padding-right: 0;
}

/*FAKE PLAY BUTTON*/
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container::after,
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container::after {
  content: 'PLAY';
  font-weight: bold;
  color: #fff;
  font-size: 14px !important;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  height: 33px;
  line-height: 2.2em;
  pointer-events: none;
}

// POSITION CATEGORY OR TAG LABELS //
/* Position the category right-corner */
.sqs-block-summary-v2 .summary-block-setting-primary-metadata-cats .summary-item-has-cats .summary-metadata--primary .summary-metadata-item--cats,{
    display: block;
 position: absolute;
    right: -10%;
  transform: translate(-50%, -50%);
 padding: 10px;
  height: 33px;
  line-height: 2.2em;
  pointer-events: none;
 transform: translate(-50%, -50%);
 padding: 10px;
  height: 33px;
  line-height: 2.2em;
  pointer-events: none;
}

/* Position tag in left corner */
.sqs-block-summary-v2 .summary-block-setting-secondary-metadata-tags .summary-item-has-tags .summary-metadata--secondary .summary-metadata-item--tags{
    position: absolute;
    left: 10%;
  }

.sqs-block-summary-v2 .summary-block-setting-primary-metadata-cats .summary-item-has-cats .summary-metadata--primary .summary-metadata-item--cats a, {
  /* default category labels are White on Magenta */
  font-size: 12pt; /* Size of category text */
  padding: 4px 9px; /* Size of category label */
  color: rgba(18, 17, 17, 0.66); /* default category font colour */
  }    

.sqs-block-summary-v2 .summary-block-setting-secondary-metadata-tags .summary-item-has-tags .summary-metadata--secondary .summary-metadata-item--tags a {
  /* default category labels are White on Magenta */
  font-size: 12pt; /* Size of category text */
  padding: 4px 9px; /* Size of category label */
  color: rgba(18, 17, 17, 0.66);/* default category font colour */
  } 

.sqs-block-summary-v2 .summary-title a:link {
  color: rgba(18, 17, 17, 0.66); /* color of title */
  font-size: 15px !important;
weight: 400;
font-family: freight-medium;
}

2/ I am trying to disable the link of my secondary metadata tags but my code is not working. I used the following code :
 

/* disable blog links on summary block titles for Date Box*/
#floatsection .summary-item-has-tags-link {
pointer-events: none !important;
}

 I am really struggling to move an element around, I have spent several hours trying to fix it but it's a total mess.
Thanks in advance !

Manon

Can you share link to exact page? Thank you

Hello Tuanphan, 

Sorry for the late reply, I just log-in today.
After spending a lot of time struggling I decided to give up on that idea and I went for another type of display which turns out awesome !🙂