3 Replies Latest reply: Nov 25, 2014 3:51 AM by Deaf Mike RSS

    Text gets cut off on responsive - my CSS not working?

    Deaf Mike Community Member

      Hi,

       

       

      I'm setting up a site in DW:

       

       

      https://dev3.orr.noaa.gov/

       

       

      Please note the sidebar where it has a photo of the oil rig.  I set up the text underneath of it in a DIV called sidebar-news and then in the CSS, I added:

       

       

      <style>

      #news {

      width: 35%;

      float: left;

      padding: 0;

      }

       

      #map {

      float: left;

      width: 60%;

      padding: 0;

      margin-left: 5%

      }

       

      @media screen and (max-width: 600px) {

      #news {

      float: none;

      width: 100%;

      }

      #map {

      float: none;

      width: 100%;

      margin-left: 0;

      }

      #sidebar-news {

      float: none;

      width: 100%;

      margin-left: 0;

      }

      </style>

       

       

       

       

      The sidebar works great on a desktop, but on a phone, the text is getting cut off on the right margin, unlike the other text on the phone version, which looks great.  Can someone tell me why that text is getting cut off?  Snapshot of the phone version that shows the cut off text is below.  Hope someone can help.  Thanks.

       

      custoff.jpg