Jump to content

Scaling down a scrolling banner for mobile

Recommended Posts

  • Replies 7
  • Views 555
  • Created
  • Last Reply

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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>

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.