Archived topic
Link for header to appear on one line uninterrupted?
5 replies · Started by William on February 25, 2021
Hi there,
On mobile (and some desktop) here, the link appears on two different lines, which does not work with the styling of the link.
Is there a way that the link can be on one line, or improved to make it look less bad?
Kind regards,
Will
Hi there
you can try changing your CSS from:
.page-hero a {
color: #222;
background-color: #fff;
text-shadow: 0px 0px 16px rgba(0,0,0,0);
padding-right: 5px;
padding-left: 5px;
border-radius: 5px;
padding-bottom: 1px;
}to:
.page-hero a {
color: #222;
background-color: #fff;
text-shadow: 0px 0px 16px rgba(0,0,0,0);
padding-right: 5px;
padding-left: 5px;
border-radius: 5px;
padding-bottom: 1px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}It won't fix it from wrapping to two lines but it will improve the styling.
Is the wrapping to two lines issue unavoidable then? Also, I just implemented that and on mobile the hover effect has stopped working?
Appreciate the help lots.
Alternative is to remove those two lines, and use display: inline-block; this will force the read more to a new line when theres not enough room for it....
Yes that works a treat, thanks!
You're welcome
