Widget font size

• 

  chrisnostrand · Member · Dec 21, 2016 at 12:54 am

  • Copy link
  • Add topic to favorites

  Hi, I’m trying to change the font size of widget footer 4 on nostrandproductions.com

  what is the code for this?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Dec 21, 2016 at 9:03 pm

  • Copy link

  Hi there, I see you have gotten the font size set in that widget. What you have works just fine, but if we make a change to the CSS selector used, we can then do away with the !important keyword. It is always best to stay away from using that unless absolutely necessary as it can in some instances make things difficult later on with other changes.

  .footer-widgets #text-10 {
  	font-size:12px;
  }

  Again, what you have works, and in this case, I don’t think it would cause issues with anything else, so it is up to you whether you wish to change it or not.

• 

  chrisnostrand · Member · Dec 23, 2016 at 11:44 pm

  • Copy link

  Great thanks! Also similar question: is there css code for size of the “site title” text and also to break it into two lines in the correct spot? Right now I have Nostrand Productions: Hudson Valley Digital Film & Video Production. It would be nice to lower the font size a bit and break it after the ( : ). Thanks again!

• 

  chrisnostrand · Member · Dec 23, 2016 at 11:44 pm

  • Copy link

  Great thanks! Also similar question: is there css code for size of the “site title” text and also to break it into two lines in the correct spot? Right now I have Nostrand Productions: Hudson Valley Digital Film & Video Production. It would be nice to lower the font size a bit and break it after the ( : ). Thanks again!

• 

  thesacredpath · Member · Dec 24, 2016 at 1:49 am

  • Copy link

  Hi, we can’t add breaks to a site title since it is a single string of text, but we can play with the width of the element. Add the following to the end of your custom CSS and see what you think. With the reduction in font size and the 70% max-width, it lets the title move up and to the right of your logo. I’ve also adjusted things so that your menu is all on one line on larger screens. I’ve limited this change to 768px and wider screens/windows since below that width the touch menu becomes active and this let’s the header area revert back to the normal arrangement and behavior.

  @media screen and (min-width: 768px) {
  	.site-title {
  	    font-size: 2rem;
  	    max-width: 70%;
  	    width: 100%;
          }
  	.main-navigation {
  	    width: 70%;
  	}
  }