Позиционирование выдержки из таблицы - PullRequest
Новая
       12

Позиционирование выдержки из таблицы

0 голосов
/ 12 февраля 2020

Где я нахожусь на

Где мне нужно быть

Хорошо, так что выше приведены примеры того, что мне нужно сделать .. Мне нужно, чтобы заголовок поста с белым фоном появлялся в 5 разных местах, а не только в центре справа. Я использую elementor и редактирую виджет css для желаемого эффекта, но я немного застрял. Я не знаю, есть ли законченные виджеты для elementor, которые могут дать мне желаемый эффект, или я обречен писать и удалять бесконечно. Ниже приведен код CSS, который я редактирую для внешнего вида. Но я не очень опытный и изучаю java, поэтому я спрашиваю здесь, может ли кто-нибудь мне помочь. Спасибо за ваше время! 

#{{uc_id}} {
  display: grid;
  grid-template-columns: repeat({{number_of_items_on_desktop}}, 1fr);
  grid-gap: {{gap}}px;
}
#{{uc_id}} div.postGridItem{
  background-color: {{background_overlay_color}};
  position:relative;
  overflow:hidden;
}



#{{uc_id}} div.postGridItem .postGridImageOverlay
{
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  background-size:cover ;
  transition:1s;
  opacity:1;
}

#{{uc_id}} div.postGridItem:hover .postGridImageOverlay
{
  transform: scale(1.1,1.1);
  opacity:0.9;
}




#{{uc_id}} div.postGridItem::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}

#{{uc_id}} div.postGridItem .postGridContent
{
  position:absolute;
  top:20px;
  left:50px;
  right:0px;
  bottom:20px;
  text-align:left;
  display:inline-flex;
  align-items:right;
  justify-content:right;
  flex-direction: flex;
  color:black;
  background-color:white;
}

#{{uc_id}} div.postGridItem .postGridContent .postGridTitle
{
  font-size:7px;
  text-align:left;
  position:relative;
  margin:0px 0px 0px 0px;
}

#{{uc_id}} div.postGridItem .postGridContent .postGridDescription
{
  font-size:18px;
}

#{{uc_id}} div.postGridItem .postGridContent .postGridButton
{
  display:inline-block;
  padding:10px 30px;
  color:white;
  border:1px solid white;
  text-decoration:none;
  margin-top:20px;
}



@media (max-width:768px)
{
  #{{uc_id}} {
  grid-template-columns: repeat({{number_of_items_on_tablet}}, 1fr);
  }
}


@media (max-width:420px)
{
  #{{uc_id}} {
  grid-template-columns: repeat({{number_of_items_on_mobile}}, 1fr);
  }
}
...