0
\$\begingroup\$

The font size scales up/down based on the size of the browser to fit the nav bar buttons (using @media).

.navButtonText p{
    text-align: center;
    margin: auto;
    font-family: 'Indie Flower', serif;
                 font-weight:900;
                 color: gray;
                 font-size: 20px;
line-height: 20px;
  vertical-align: middle;
    margin-top: 6px;
}
}
@media only screen and (max-width: 650px) {
    .navButtonText p{
    text-align: center;
    margin: auto;
    font-family: 'Indie Flower', serif;
                 font-weight:900;
                 color: gray;
                 font-size: 18px;
line-height: 20px;
  vertical-align: middle;
    margin-top: 6px;
}
}
@media only screen and (max-width: 550px) {
    .navButtonText p{
    text-align: center;
    margin: auto;
    font-family: 'Indie Flower', serif;
                 font-weight:900;
                 color: gray;
                 font-size: 16px;
line-height: 20px;
  vertical-align: middle;
    margin-top: 6px;
}
}
@media only screen and (max-width: 450px) {
    .navButtonText p{
    text-align: center;
    margin: auto;
    font-family: 'Indie Flower', serif;
                 font-weight:900;
                 color: gray;
                 font-size: 14px;
line-height: 20px;
  vertical-align: middle;
    margin-top: 6px;
}
}
@media only screen and (max-width: 350px) {
    .navButtonText p{
    text-align: center;
    margin: auto;
    font-family: 'Indie Flower', serif;
                 font-weight:900;
                 color: gray;
                 font-size: 12px;
line-height: 20px;
  vertical-align: middle;
    margin-top: 6px;
}
}

As you can see, it is quite a bit of styling for one thing. I was wondering if there was a way I could clean up this code, so I wouldn't need to have it in these many lines.

I have SASS and Compass which I am willing to use.

\$\endgroup\$

migrated from stackoverflow.com Jun 21 '16 at 23:00

This question came from our site for professional and enthusiast programmers.

2
\$\begingroup\$

You could remove all the duplicate lines in the @media queries and provide only the changes in these tags. This is beacause in CSS, the CSS classes that are interpreted by the browser down-most on your page, are the ones prevailing in your final design. All previous defined CSS rules apply unless overwritten. In your case this means that only the font-size changes and should be redefined:

.navButtonText p {
    text-align: center;
    margin: auto;
    font-family: 'Indie Flower', serif;
    font-weight: 900;
    color: gray;
    font-size: 20px;
    line-height: 20px;
    vertical-align: middle;
    margin-top: 6px;
}
@media only screen and (max-width: 650px) {
    .navButtonText p {
        font-size: 18px;
    }
}
@media only screen and (max-width: 550px) {
    .navButtonText p {
        font-size: 16px;
    }
}
@media only screen and (max-width: 450px) {
    .navButtonText p {
        font-size: 14px;
    }
}
@media only screen and (max-width: 350px) {
    .navButtonText p {
        font-size: 12px;
    }
}

FYI: there is away to prevent this from happening, using the !important tag.

\$\endgroup\$
  • \$\begingroup\$ You have an extra closing bracket for .navButtonText p css \$\endgroup\$ – jtmingus Jun 21 '16 at 21:13
  • \$\begingroup\$ Yes, thank you for pointing that out, I copied his CSS though, it's also wrong in the original question. \$\endgroup\$ – JohannesB Jun 21 '16 at 21:15
1
\$\begingroup\$

You could also go for a scss or less solution (the syntax would be identical for both preprocessors in this case), which imo gives you even cleaner code the what @JohannesB suggested. The resulting (compiled) css would be the same though.

.navButtonText p {
  text-align: center;
  margin: auto;
  font-family: 'Indie Flower', serif;
  font-weight: 900;
  color: gray;
  font-size: 20px;
  line-height: 20px;
  vertical-align: middle;
  margin-top: 6px;

  @media only screen and (max-width: 650px) {
    font-size: 18px;
  }
  @media only screen and (max-width: 550px) {
    font-size: 16px;
  }
  @media only screen and (max-width: 450px) {
    font-size: 14px;
  }
  @media only screen and (max-width: 350px) {
    font-size: 12px;
  }
}
\$\endgroup\$
  • \$\begingroup\$ You missed the max-width:450px and font-size:14px, other than that, good answer. \$\endgroup\$ – JohannesB Jun 21 '16 at 21:19
  • 1
    \$\begingroup\$ sorry about the confusion guys, I didn't know CodeReview was a thing. \$\endgroup\$ – DJONES Jun 21 '16 at 21:30
  • \$\begingroup\$ @Jonathan, on SO it is not considered good practice to focus on the person instead of on the content, please read the name-calling section in the be nice-policy. \$\endgroup\$ – JohannesB Jun 21 '16 at 21:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.