Lighthouse has a new layout. Prefer the old one? Return to the old layout, and switch back any time from the link at the top of each page.

CSS in Events

#1294

The date field when using the calendar function uses the CSS .dtstart . In a normal browser this is fine. However I have now completed an exercise in making the sandtoft.org site mobile-friendly. In portrait mode for smaller screens I have had to set .dtstart { margin-left: -170px; } so that the date can be displayed - see capture.jpg. This however means that it disappears off to the left when you open an event - see capture1. Is there any way to force a different CSS for the two places where this item is used? (Other two captures are normal browser views).

Thanks.
Peter.

Reported by peters@slx-online.biz · May 26th, 2015 @ 04:26 PM

State: new
Milestone: none
Assigned to: expNinja expNinja

Activity

  1. peters@slx-online.biz
    peters@slx-online.biz
    • Assigned user set to expNinja

    Thanks. Unfortunately that has not made any difference. The CSS now includes:

    @media (orientation: portrait) and (max-width: 424px) { #doc { width:390px; } #centercol { width: 385px; } #hd { width:390px; height: 56px; background:url(http://sandtoft.slx-online.biz/themes/sandtofttheme/images/header1-...) no-repeat center top #8e0000;border:1px solid #8b0000; } img{ width:auto; max-width: 100%; height:auto; } .vevent li { width: 150px; } .events .upcoming-events-headlines .dtstart { margin: -170px; } .events .show .dtstart { margin; 0px; } /* .dtstart { margin-left: -170px; } */ .event-return:after { content:" -- Best Viewed in Landscape"; } }

    Have I missed something?

    Thanks.
    Peter.

    May 27th, 2015 @ 08:18 AM

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.