How to insert responsive code into a page

Support Area Forums Progress How to insert responsive code into a page

Viewing 3 posts - 1 through 3 (of 3 total)
URL to the page in question:
  • Author
    Posts
  • #14176
    John McCauley
    Participant

    Hi Bill, I have entered this code below in a “page” and it summons a mp3 music player which is working well, except that the player is not responsive, it jumps off the page on devices.

    Is there a code I can enter on the page to harness the player into being responsive?

    FYI, I got the same player to be responsive on a simple one page html site, but I need to move my site to word press now ( using progress ) and cant figure this out.

    Here is the code I dropped in top of page

    <script type=”text/javascript” src=”formval.js”></script>
    <script src=”/pickle/pickle.js” language=”javascript” type=”text/javascript”></script>
    <link href=”/pickle/skins/default_all/_stylesheet.css” rel=”stylesheet” type=”text/css” />

    And this is the code I drop in center of page to summon the pickle mp3 player.

    <div data-media=”/pickle/skins/default_all/_playlist_example.xml” data-autoplay=”true”></div>

    I hope you can help.

    John

    #14187
    Bill Robbins
    Moderator

    John,

    Making it responsive shouldn’t be a problem. Any chance you could send over a link to where you’re working with the player so I can take a look at it. That’ll let me send over the correct CSS so it’ll be responsive.

    Thanks,
    Bill

    #14192
    Bill Robbins
    Moderator

    Thanks for sending over the link. That player is not the most friendly to making it responsive since it has lots of absolutely positioned elements and background images. But here are some styles to at least get you started:

    
    article .PKL_wrapper,
    article div#PKL_PLAYER,
    article div#PKL_PLAYER table {
    	width: 100% !important;
    	height: auto;
    	padding-bottom: 70px;
    	overflow: hidden;
    }
    
    article .PKL_playlist{
    	width: 67% !important;
    	left: 36%;
    }
    
    article .PKL_poster {
    	width: 30% !important;
    }
    
    article .PKL_playlistScrollBkgd{
    	left: auto;
    	right: 0;
    }
    
    article .PKL_controlsBkgd {
    	width:100%;
    }
    
    article .PKL_playlistItemBkgd {
    	width: 100% !important;
    }
    
    article .PKL_info {
    	width: 50%;
    }
    
    @media only screen and (max-width: 767px) {
    
    	article .PKL_poster {
    		display: none;
    	}
    	
    	article .PKL_playlist{
    		width: 100% !important;
    		left: 0;
    	}
    	
    }
    

    See if those won’t get you pointed in the right direction.

    If you run into trouble, let me know,
    Bill

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘How to insert responsive code into a page’ is closed to new replies.