Jump to content

Archived

This topic is now archived and is closed to further replies.

emelie

How do I change the masthead title size?

Recommended Posts

emelie

Hi, 

I´ve tried to change the masthead title size on this site: http://ndimeetings.org/ (Title= Nerve-Driven Immunity Meetings) it´s to big!

 

I have changed the Custom CSS (in Site Options > Custom Code > Custom CSS) 

I tried this codes: 

 

.masthead .masthead-title { font-size: 20px;}

 

.singular .entry-title {
color: #000; /*Change This to whatever color you want*/
font-size: 20px; /*Change This to size you want*/
font-weight: bold;
line-height: 48px;
 
But the size is still the same. Could someone please tell me what to do?
 
 
Thanks,
Emelie

Share this post


Link to post
Share on other sites
emelie

I solved the problem:)

 

If someone else have the same problem. Go to the Custom CSS (in Site Options > Custom Code > Custom CSS) 

and insert this code:

body{}

.masthead .masthead-title {
  margin-bottom: 9px;
  font-size: 81px;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 18px;
}
 
change 81px to the resize the masthead title 
 
:)
 
/Emelie

Share this post


Link to post
Share on other sites
Danny

Thanks for informing us the issue has been resolved and for sharing.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
James B

To make the change responsive us em or % values instead of static px sizes.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
frakture

I've tried doing that, to no avail. It looks find in DMS, but the CSS doesn't change in other browsers and the masthead title still hangs off page on phone. This is what I've typed into the CSS box:

.masthead .masthead-title {
    font-size: 4em;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 10px;
}

But after I publish it, and look in Firebug, it reverts to this: 

.masthead .masthead-title {
    font-size: 72px;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 10px;
}

Suggestions?

Share this post


Link to post
Share on other sites
James B

Hi there, EM will be converted to a px size in the browser, so if you base font size is 18px in the settings and you've listed 4em in the custom css it will load as 72px in the final site etc. See http://pxtoem.com/ which helps with the conversions.

 

The other way you can do it if you want to target mobile specifically is in to install the pro tools plugin which adds the browser classes to the system. Then you can use the browser specific class in front of your css to target and change the font size on the mobile only.

 

.mobile .masthead .masthead-title {
font-size: 40px;
}

 

A full list of the browser classes available can be seen at http://support.pagelines.me/docs/plugins/browser-specific-css/ towards the bottom of the page.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
frakture

So I've added that (have the pro tools installed already)... and even made it 12px for emphasis. I cannot get that Masthead Title to go smaller on mobile for the life of me. 

.masthead .masthead-title {
    font-size: 4em;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 10px;
}

.mobile .masthead .masthead-title {
	font-size: 12px;
}

www2.frakture.com is the site. You can see in this screenshot how that title hangs off the right side and makes the page wider than it should be. 

 

photo.png

Share this post


Link to post
Share on other sites
James B

Looking at the css you've pasted above you've not included the browser prefix .mobile, you'll need to set a different size for the .mobile version to see the changes between the desktop and the mobile.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
frakture

Sorry, when I added my screenshot, it messed up the spacing of my css... it does have .mobile in it. 

.masthead .masthead-title {
    font-size: 4em;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 10px;
}

.mobile .masthead .masthead-title {
	font-size: 12px;
}

Share this post


Link to post
Share on other sites
Danny

For me the simplest way to achieve responsive resizing of your Masthead title, is to just use media queries, that is how it is currently done in DMS, see here for the code currently used.

 

https://github.com/pagelines/DMS/blob/1.1/sections/masthead/style.less#L106-L161


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
frakture

I have taken out any CSS for the masthead I had, and replaced it with this from the github link ... and still is not responsive. My whole site looks cruddy because of this on my iphone. 

/* Jumbotrons
-------------------------------------------------- */
.masthead {

    position: relative;
    margin-bottom: @baseLineHeight * 3;

	.inner{
		padding-top: @baseLineHeight * 2;
	}

	&.with-splash{
		.inner{
			padding-top: @baseLineHeight;
		}
	}

	h1,
	p {
	  text-align: center;
	}

	.masthead-title {
		margin-bottom: 9px;
		font-size: 72px;
		letter-spacing: -1px;
		line-height: 1;
		margin-bottom: 18px;
	}

	.masthead-tag {
		margin: 0;
		margin-bottom: 18px;
		margin-left: 5%;
		margin-right: 5%;
		font-size: 25px;
		line-height: 1.3em;
		opacity: .7;
		font-weight: 300;
		strong{
			font-weight: 500;
		}
	}

	.btn-large {
	  font-size: 20px;
	  font-weight: normal;
	  padding: 14px 24px;
	  margin: 0 10px;
	  .border-radius(6px);
	}

	.btn-large small {
	  font-size: 14px;
	}

	.splash {
		padding-top: @baseLineHeight / 2;
		img {
			display:block;
			margin:0 auto;
		}
	}
}

.mastmeta{
	color: @textColorAlt;
}



.subhead {

    padding-bottom: 0;
    margin-bottom: 9px;

	h1 {
  		font-size: 54px;
	}
}

.mastlinks {
    margin: 36px 0;
}

.quick-links {

	min-height: 30px;
    margin: 0;
    padding: 5px 20px;
    list-style: none;
    text-align: center;
    overflow: hidden;

	&:first-child {
	  min-height: 0;
	}
	li {
	  display: inline;
	  margin: 0 8px;
	}
}



/* Responsive
 ************************/

@media screen and (max-width: 980px){
	.masthead .masthead-title {
		font-size: 54px;
	}
}
@media screen and (max-width: 768px){

	.masthead {

		.inner{
			padding-top: @baseLineHeight;
		}

		.masthead-title {
			font-size: 36px;
		}

		.masthead-tag{
			margin-right: 0;
			margin-left: 0;
		}
		.btn {
			margin-bottom: 10px;
		}
	}

}
@media screen and (max-width:480px) {
	.masthead {

		.inner{
			padding-top: 10px;
		}
		.masthead-title {
			font-size: 36px;
			margin-right: 0;
		}

		.masthead-tag{
			margin-right: 0;
			margin-left: 0;
			font-size: 18px;
			line-height: 24px;
		}
		.btn {
			display: block;
			font-size: 18px;
			padding: 10px 14px;
			margin: 0 auto 10px;
		}
	}

}

Share this post


Link to post
Share on other sites
Danny

Why have you replaced your own custom code, with code already being used ?

 

I linked you to that code, to show you how to use media queries to reduce the font sizes.

 

@media screen and (max-width: 980px){
  .masthead .masthead-title {
    /* Add font size here */
  }
}
@media screen and (max-width: 768px){
  .masthead .masthead-title {
    /* Add font size here */
  }
}
@media screen and (max-width:480px) {
  .masthead .masthead-title {
    /* Add font size here */
  }
}
 
Please be aware that we do not provide extensive CSS support and do not provide support to users custom CSS. If you're having issues with your CSS, you will want to find CSS support from a CSS specific forum.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
frakture

I did make the font sizes smaller than what was being used. Sorry - new at this stuff (but have spent hours trying to figure it out myself). 

Share this post


Link to post
Share on other sites
Danny

OK, well use the code above in my previous post, add your font sizes, make sure they're reduced each time. For example:

 

@media screen and (max-width: 980px){
  .masthead .masthead-title {
    font-size: 48px;
  }
}
@media screen and (max-width: 768px){
  .masthead .masthead-title {
    font-size: 36px;
  }
}
@media screen and (max-width:480px) {
  .masthead .masthead-title {
    font-size: 24px;
  }
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
frakture
@media screen and (max-width: 980px){
  .masthead .masthead-title {
    font-size: 36px;
  }
}
@media screen and (max-width: 768px){
  .masthead .masthead-title {
    font-size: 24px;
  }
}
@media screen and (max-width:480px) {
  .masthead .masthead-title {
    font-size: 18px;
  }
}

I've done that, and made the sizes even smaller for emphasis. No luck on my iPhone 4s. Can you see what it looks like on your phone by chance? 

Share this post


Link to post
Share on other sites
Danny

Try this:

 

@media screen and (max-width: 980px){
  #site .masthead .masthead-title {
    font-size: 36px;
  }
}
@media screen and (max-width: 768px){
  #site .masthead .masthead-title {
    font-size: 24px;
  }
}
@media screen and (max-width:480px) {
  #site .masthead .masthead-title {
    font-size: 18px;
  }
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

The code hasn't been updated, it isn't sowing the #site


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
frakture

Hmmm, that's weird - I've published, gone back into my wordpress dashboard, come back and it's there. 

Share this post


Link to post
Share on other sites
frakture

Can you check again? I've reinstalled Chrome, gone back in, and it's there. Thank you for your patience!

Share this post


Link to post
Share on other sites
Danny

The code isn't there ? Where are you adding the code?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
frakture

Hi there - I've had an engineer take a look - and for whatever reason, the Custom CSS was silently failing to compile/save. We cut and pasted line by line the CSS back in, and it now seems to be saving. So I can't really say what the original problem was with saving the CSS.... but it seems to be working again. 

 

Again, thank you for your patience! 

Share this post


Link to post
Share on other sites

×