3 Replies Latest reply: Apr 9, 2013 5:20 PM by Ben Pleysier RSS

    not sure how to spec this width

    anita1390 Community Member

      (Q1) My div CONTENT (see left column, as opposed to the right column div aside)
      http://welcomemat-mark.businesscatalyst.com/

       

      goes too wide at full view.
      It's fine at tablet and phone view.
      So do I add a spec below
      like max-width;480px

      or does it belong somewhere else

       

      }

      #content {

                clear: both;

                float: left;

                margin-left: 0;

                width: 100%;

                display: block;

      }

       

       

      (Q2) I ask because I wasn't successful specing min-width

      so the header artwork doesn't get any smaller then 768 px wide.
      It can flow off the screen to the right at phone view.
      However this spec had no effect:

       

      #header {

                clear: both;

                float: left;

                margin-left: 0;

                width: 100%;

      min-width: 768px

                display: block;

      }

        • 1. Re: not sure how to spec this width
          Nancy O. CommunityMVP

          Anita,

          I don't really see a problem.  Fluid Grids are % based. Can you elaborate on what's wrong?

           

           

          Nancy O.

          • 2. Re: not sure how to spec this width
            anita1390 Community Member

            the aside column goes too right in the full view, it should stay below the masthead.

             

            So I thought the min-width would do it but it doesn't change anything.

            Maybe I need:
            max-width:100%
            min-width:768px

             

            I am having so much trouble w/BC, when I get a chance to upload
            I'll try respecing the max-width?

            • 3. Re: not sure how to spec this width
              Ben Pleysier CommunityMVP

              1. In fluid.css line 158 change the width to the width of the banner which is 1001px

               

              2. Have divisions each holding boca-head-use.png as per

              <div class="header large"><img src="images/boca-head-use.png" alt="Welcomemat-of-Boca"></div>

              <div class="header small"><img src="images/boca-head-use.png" alt="Welcomemat-of-Boca"></div>

              Then using the style rules within the media queries, show and hide the respective divisions. I'll only show the larger version here

              @media only screen and (min-width: 769px) {

              .header.large {

               

                display: block;

              }

              .header.small {

                display: none;

              }

              }

              Note how I have change the header from an ID to a CLASS. Makes things a lot easier. I use ID's only when absolutely required.

               

              You can now apply the style rules to all other aspects such as setting a fixed width for the image for the small screen and have an overflow hidden for the small header.

               

              Please come back here if you encounter a problem