0
Welcome Guest! Login
0 items Join Now

Responsive Heading Styles

Last Post
Search Topic

  • Responsive Heading Styles

    Posted 8 years 11 months ago
    • Hi
      I'm using Callisto template - Gantry 5
      Any tips on how I make heading styles responsive to the screen resolution.
      Example:
      I want the telephone number (which uses h8 & h9 heading styles) top right to scale:
      181.224.137.30/~auntiesd/lostockhall/index.php

      I have this in custom css:
      h8 {
      font-family: "Lato",san-serif!important;
      font-weight: 300;
      color: #ffffff;
      font-size:18px!important;
      }
      h9 {
      font-family: "Lato",san-serif!important;
      font-weight: 900;
      color: #ffffff;
      font-size:18px!important;
      }

      Andy
    #1210584
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Responsive Heading Styles

    Posted 8 years 11 months ago
    • If you want TOTAL control over your mediaqueries write them like this:
      /** Mobile Mode **/
@media (max-width: 768px) {
  h8 {
    font-size: 36px !important; }

  h9 {
    font-size: 36px !important; }
}

/** Large Mode **/
@media only screen and (min-width: 1200px) {
  h8 {
    font-family: "Lato", san-serif !important;
    font-weight: 300;
    color: #fff;
    font-size: 18px; }

  h9 {
    font-family: "Lato", san-serif !important;
    font-weight: 900;
    color: #fff;
    font-size: 18px;
  }
}

      So:
      1) you had @media (max-width: 768) - you need the "px"
      2) your original h8.h9 used font-size: 18px !important; so by using the !important attribute in the non-mediaquery Desktop mode when you went to mobile and attempted to use the same set of CSS selectors it would do nothing as you can't override something that is already usint the !important attribute.

    • The following users have thanked you: Andy Prosser

    #1210692

Time to create page: 0.050 seconds