Home / Forums / You Theme Support / Problems with content disappearing in smaller mobile views:

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts

  • Mike
    Participant

    When I manually shrink the viewport size to mobile view, it is cutting off the “content” display of my image gallery. See screenshot below:

    This appears to happen at about the 600 mark.

    The gallery is built via Isotope, with informationed generated from the Modern Tribe The Event Calendar plugin. You can see the clean (working) code for it here:
    http://jsfiddle.net/michaelpatino/ynjn3vsd/1/

    As you can see in the sample, the code before splicing into the Theme works properly at all sizes (responsively adjusting the # of columns and display to match the viewport). When implanted into the theme, it breaks at approximately the 600px point.

    To get the display to wrap wide screen, I did have to add some custom CSS (in child theme style.css):

    #tribe-events-pg-template {
    	margin: 0 auto;
    	max-width: 90%;
    	width: 90%;
    }
    
    #tribe-events-content.tribe-events-list {
    	padding: 1px 0 !important;
    	max-width: 90%;
    	width: 90%;
    }
    
    .content-wrap row { width: 90%; max-width: 90%;}

    Is there something in the media sizing that is causing this behavior?

    Hi Mike,

    What’s causing the issue is this CSS from the ‘Events Calendar Pro’ plugin

    
    @media (max-width: 600px){
    div#tribe-events-photo-events {
        height: auto!important;
        width: 100%;
    }
    }

    The CSS file is on this path: http://thepaintandpour.us/wp-content/plugins/events-calendar-pro/src/resources/css/tribe-events-pro-full-mobile.min.css

    Just remove or comment out the height and that should fix the issue.

    Thanks!

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.