I have a classes page on a client site that preselects the booking so I can better style the categories.
And the issue is that when someone clicks a class, it basically opens in a lightbox, ALL of the older people that clicked it used the browser back button instead of the one they SHOULD use.. as it shows the category title, NOT "Back" How can I change this?
I have a classes page on a client site that preselects the booking so I can better style the categories.
And the issue is that when someone clicks a class, it basically opens in a lightbox, ALL of the older people that clicked it used the browser back button instead of the one they SHOULD use.. as it shows the category title, NOT "Back" How can I change this?
My temp workaround
.am-category-url::after {
content: " (Go Back)";
}
.amelia-app-booking #am-service-booking .am-service .am-service-header .am-service-data .am-category-url {
font-size: 18px !important;
line-height: 1.9em !important;
color: #ffffff !important;
border: 2px solid #F80101 !important;
border-radius: 8px;
background: #F80101;
padding: 11px;
margin-bottom: 12px !important;
}
Hi, Jacob!
Sorry for the delayed response, I had to consult with our front-end developer.
Your solution is correct, but also you can try this CSS:
.amelia-app-booking #am-service-booking .am-service .am-service-header .am-service-data .am-category-url {position: relative;
text-align: left !important;
width: 100%;
max-width: 150px;
height: 60px;
overflow: hidden;
text-transform: uppercase;
font-size: 18px!important;
font-weight: 600!important;
line-height: 2em!important;
color: #ffffff!important;
border: 2px solid #F80101!important;
border-radius: 8px;
background: #F80101;
padding: 11px;
margin-bottom: 12px!important;
transition: all 300ms ease 0ms;
} .amelia-app-booking #am-service-booking .am-service .am-service-header .am-service-data .am-category-url::after {
content: "Go Back";
position: absolute;
top: 11px;
left: 32px;
width: calc(100% - 32px);
background-color: #F80101;
text-align: center;
transition: all 300ms ease 0ms;
} .amelia-app-booking #am-service-booking .am-service .am-service-header .am-service-data .am-category-url:hover::after {
background-color: #000;
}
That's how it will look like:
Please let us know if you have any other questions.
Best Regards.