5 Replies Latest reply on Jul 11, 2013 1:40 PM by Nancy OShea

    HTML 5 Fixed problem

    atlnycdude24 Level 1

      Hello, I'm having trouble adjusting the width of the banner slide show. The white background is too big so I want the size of the the banner but I do want to keep the learn more button. Also I want to center it. Please help.

      http://www.rodriguezstudios.com/rsrwd/

       

       

      The website looks very big on my other laptop which has a smaller screen, for me it looks very unprofessional because of that big white background.

       

       

      I would like to reduce the size the white background plus the size of the learn button to where it does not would cause any problems with the rswd other of screens. thanks..

        • 1. Re: HTML 5 Fixed problem
          BenPleysier Adobe Community Professional & MVP

          In bootstrap.css have a look at Line 6111

          .hero-unit

          {

            padding-top: 60px;

            padding-right: 60px;

            padding-bottom: 60px;

            padding-left: 60px;

            margin-bottom: 30px;

            font-size: 18px;

            font-weight: 200;

            line-height: 30px;

            color: inherit;

            background-color: #eeeeee;

            border-top-left-radius: 6px;

            border-top-right-radius: 6px;

            border-bottom-right-radius: 6px;

            border-bottom-left-radius: 6px;

          }

          See what happens when you set the values to zero (0)

          • 2. Re: HTML 5 Fixed problem
            Nancy OShea Adobe Community Professional & MVP

            In bootstrap.css  change to the following:

             

            .hero-unit {

              padding: 60px 0;

              margin-bottom: 30px 0;

              font-size: 18px;

              font-weight: 200;

              line-height: 30px;

              color: inherit;

              background-color: #999; /**adjust value as desired**/

              -webkit-border-radius: 6px;

              -moz-border-radius: 6px;

              border-radius: 6px;

            }

             

             

             

            Nancy O.

            • 3. Re: HTML 5 Fixed problem
              atlnycdude24 Level 1

              Thanks for the response guys, the problem is that I don't have the bootstrap.css. I used the bootstrap sample page templates and it did not gave me that particular file.

               

              it only produced the bootstrap-responsive.css which has no hero tags.

              • 4. Re: HTML 5 Fixed problem
                atlnycdude24 Level 1

                I apologize, I did not notice the folder that contained the bootstrap.css. Okay, the new values that you guys provied me, did some improvement but the banner shift to the left. It can be a benefit so i can add the information about the product in my slide show but how i can shft it to the center or the rigiht. Much appreciated.

                • 5. Re: HTML 5 Fixed problem
                  Nancy OShea Adobe Community Professional & MVP

                  You'll need to tweak the code.  Try opening the page in Firefox with Web Developer Toolbar add-on.  This will allow you to edit the CSS code on screen until you get what you want.  When you're happy with it, copy & paste the new CSS code into your current style sheet in DW.

                   

                   

                  Nancy O.