Banshee
the secure PHP framework

Forum

Solution to Agenda layout text overlapping in smal

chapchap70
30 august 2018, 06:58
When tapping an appointment link on a smartphone, the appointment screen has text overlap. There is probably a better solution to this but I inserted <h2>&#160;</h2> as lines 85, 87, and 103 in ../agenda.xslt so the layout looks better in phones.
Hugo Leisink
31 august 2018, 09:01
Thanks for letting me know. My solution:

agenda.xslt:
<h3><span><xsl:value-of select="begin" /></span><span><xsl:value-of select="end" /></span></h3>

agenda.css:
h3 span:first-child:after {
content:"-";
margin:0 10px;
}
@media (min-width:768px) {
h3 {
text-align:right;
margin-top:-28px;
}
}
@media (max-width:767px) {
h3 span {
display:block;
}
h3 span:last-child {
text-align:right;
}
}
chapchap70
1 september 2018, 02:35
I do believe the negative sign was the culprit...
CSS
margin-top: -28px;


I may do this...

h3 {
text-align:left;
margin-top:28px;
}
Message preview

The following BB-codes are available in a message:

  • [b]Bold text[/b]
  • [center]Center text or imagen[/center]
  • [color=color name or #RGB code]Colored text[/color]
  • [i]Italic text[/i]
  • [img]Link to image[/img]
  • [right]Align text or image right[/right]
  • [s]Strike-through text[/s]
  • [size=pixelsize]Big or small text[/size]
  • [u]Underlined text[/u]
  • [url]Link to website[/url]
  • [url=link to website]Link text[/url]