Canvas Support

font size and color change not working

2 replies · opened Nov 5, 2016

IivanpossNov 5, 2016

using portfolio 1- alt

I changed >section id="map-overlay" etc. to <section id="page-title" style="background: url('graduates.jpg') center center no-repeat; background-size: cover;">

so now I have a background picture.

Then I created a new css and linked it as the last link: <link rel="stylesheet" href="css/font-change.css" type="text/css" />

in the stylesheet "font-chaange" I have css coding for the page title section to resize it to 500px - which is working - so i know the link is working

however I have some H1 resize coding which is not working:

#page-title {
height: 500px;

h1 {
font-size: 60pt;
}

I have tried dozens of changes - using px and not pt- giving h1 an id. Changing h1 to <p and revising.
I have tried changing the color - and that doesn't work either. Something is preventing a font change. I'm guessing that something in one of the other linked stylesheets maybe?

IivanpossNov 5, 2016

putting it inline in the html file is working: <h1 style="font-size: 60px; font-weight: normal;">SENIOR PACKAGES</h1>

so I can use that...

... but why is it working inline but not in stylesheet file? I am guessing some other stylesheet is overriding my new stylesheet

SSemicolon WebSTAFFNov 6, 2016

Hello,

The previous code did not work for you since the h1 was inside a #page-title Parent and the style.css File has the #page-title h1 CSS Block defined which prioritizes it more than the Standalone h1. So, using the following code instead would work fine: 

#page-title h1 { font-size: 60pt; }

Additionally, since you are overwriting the CSS, it is recommended that you find the Code to trying to overwrite in the style.css File by using the Chrome's Inspect Element feature or anything else you are comfortable with and then Copy that Code and add it to your custom.css File. Also, it is not required to paste the Entire CSS Block but just the CSS Properties you wish to overwrite. Example if you are planning to overwrite the Font Size of the #page-title h1 CSS Block, then copy it from the style.css File: 

#page-title h1 {
	padding: 0;
	margin: 0;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 1px;
	color: #333;
	font-size: 28px;
	text-transform: uppercase;
}

but since you only need to change the Font Size, you will only need to paste the following code to the custom.css File: 

#page-title h1 { font-size: 28px; }

Hope this Helps. This will definitely work fine.

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard