CSS in Events

[exponentcms]

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.

[exponentcms]

Although we are setting the class 'dtstart', we never define it as a style so this hasn't been an issue in the past (since the class has no styling assigned)

Regardless, if you want to style it within your theme you could do something like this:

.events .upcoming-events-headlines .dtstart { /* headlines view */
  margin 0
}
.events .show .dtstart { /* show view */
  margin 0
}

[exponentcms]

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-portrait.jpg) 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.

[exponentcms]

[bulk edit]

[exponentcms]

[bulk edit]

[exponentcms]

[bulk edit]

[exponentcms]

Lighthouse URL: https://exponentcms.lighthouseapp.com/projects/61783/tickets/1294