Scaling down a scrolling banner for mobile

Site URL: https://www.mediacareeradvice.co.uk/

Hi,

I've used html code to make my homepage banner scroll.  It looks great on a desktop but on a tablet or mobile it hasn't scaled down.  How am I able to get it scale down for mobile but also work properly on a desktop?

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
#slider ul {
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
}
div#slider, #slider ul li {
    text-align: center !important;
    width: 100% !important;
}
}

Where do I put that code in amongst the code I have?  I've tried a few obvious places but it just pulls the questions across together and doesn't reduce the size of the grey banner line as it did before.  Here is the code:

<div id="slider">

   <ul>

       <li>Want to get into Film and TV but you’re not sure how?</li>

   <li>Not sure what job you want/you’re suited to in Film or TV?</li>

     <li>Have you been stuck in the same position for longer than you wanted?  </li>

    <li>Do you never seem to get the right rate for your position?</li>

  <li>Are you not sure what your rate should be?</li>

  <li>Don’t know where to start with a CV or cover letter?</li>

   <li>Do you want your CV reviewed?</li>  <li>Always get an interview but can’t get the job?</li>

  </ul> 

</div>

add my code to Home > Design > Custom CSS

Sorry my fault for not reading it properly

I added that but it's now cut off most of the text.  See attached picture

Is there another code to scale it down that doesn't just cut the text off as per the screengrab above?

On 6/3/2020 at 8:37 PM, Media_Career_Advice said:

Is there another code to scale it down that doesn't just cut the text off as per the screengrab above?

Hi. Sorry for the delay. Just had a few days off in hometown. Have you solved yet?

Thanks for getting back to me.  No I haven't managed to figure it out yet 😞