‹ Home
Exported

Demo Templates - Byron Center, MI

Gary Smith, Web Department Director at DiocesanBlake Stapleton, Web Designer at DiocesanVeronica Alvarado, Project Manager at DiocesanKyle Brown, Web Development at DiocesanMary Goeldel, DiocesanKyle Sullivan, Web Development at DiocesanSam Pohlman, Web Developer at DiocesanDanae Chudy, Web Designer at DiocesanCody Armock, Web Content Specialist at DiocesanAlan Snodgrass, DiocesanArthur Richardson, Web Project Manager at DiocesanMarcus Borger, Developer at Diocesan_SupportRyan Hoch, Web at DiocesanRachel Tupper +2 others
From the list: Robert (Transfiguration) Template

✔ Page - Button seems like it should float in the container and just move to its own line

Cody A. added this on
Completed by Kyle S.
Assigned to
Kyle Sullivan, Web Development at Diocesan Kyle S.
Notes
2021 theme (still not great obviously) vs Robert theme
image.png 255 KB • Download
image.png 527 KB • Download
https://robert.diocesanweb.org/faith-formation/child-formation/
Here are the classes that need to change on Desktop/Laptop and from what I saw on mobile, only need one class removed/changed. 
  • .wp-block-buttons.is-content-justification-center: add text-align: center
  • .wp-block-buttons.is-content-justification-right: add text-align: right
  • .wp-block-buttons: change display: flex to display: block
  • Mobile: .wp-block-buttons>.wp-block-button:last-child: remove the margin-right: 0;
With those three (four with the justification-right thing) things changed and added button to show that it works.
image.png 533 KB • Download
image.png 305 KB • Download

Comments & Events

Kyle Sullivan, Web Development at Diocesan Kyle Sullivan, Web Development
I've added the following to the Parent Theme and have pushed it to the Showcase Site. Is this correct, Cody Armock, Web Content Specialist at Diocesan Cody ? Please advise if so, and I'll push this to the other sites.
.wp-block-buttons {
  display: block;
  &.is-content-justification-center {
    text-align: center;
  }

  &.is-content-justification-right {
    text-align: right;
  }

  @media screen and (max-width: 576px) {
    &>.wp-block-button:last-child {
      margin-right: initial;
    }
  }
}
Notified 1 person
Cody Armock, Web Content Specialist at Diocesan Cody Armock, Web Content Specialist
Looks like it would have the desired effect!
Notified 1 person
Kyle Sullivan, Web Development at Diocesan
Kyle Sullivan completed this to-do.