Skip navigation
Currently Being Moderated

not sure how to spec this width

Apr 9, 2013 3:27 PM

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

}

 
Replies
  • Currently Being Moderated
    Apr 9, 2013 4:34 PM   in reply to anita1390

    Anita,

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

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2013 5:20 PM   in reply to anita1390

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points