Tagged: responsive, timeline
Hi there,
I’m using the timeline element on a page, with a text box in a 2/3 column and the timeline in a 1/3 column. The timeline is getting cut off at almost every screen size, unfortunately! Can you help?
Hey 1lizcollins,
Add this to quick css:
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2){
.page-id-2033 div .av_two_third {
width: 45%!important;
}}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape){
.page-id-2033 div .av_one_third {
width: 2.333333333333332%!important;
}}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait){
.page-id-2033 div .av_one_third {
width: 50.333333333333332%!important;
}
.page-id-2033 div .av_two_third {
width: 41.333333333333332%!important;
}}
Best regards,
Jordan Shannon
Thanks for the quick reply, Jordan. I added that code but the issue isn’t fixed – the element still runs off the page at almost every screen size.
Hi,
Did you add the code to the top of quick css so it runs first? Also, clear the cache a few times over.
Best regards,
Jordan Shannon
Yes, I did. And I know the cache was cleared as I had to re-enter the password for the page. I’m still seeing the issue, on multiple browsers.