1

_ I've just started a bootstrap project - completely new to bootstrap until a few days ago.
I've a large H1 Piece of text (overly large for the aesthetic I'm going for). I've not yet fully worked out how to change the global h1 so it over rides the bootstrap so I'm used the following which works just as I wanted (heavy font-weight and change of colour):

 #index h1 {
   color:rgb(108, 170, 179);
   font-size: 150px;
   font-weight: 900; 
}

And I'm using this in CSS to overwrite the font-family (which, again, works well):

* {
  font-family: 'Montserrat', sans-serif;

}

However, the '@media only' isn't picking this up (as I'm not sure how to tell it to). The h1, h2 et are responsive (if I take out the #index h1 code). This H1 is sat in a 'jumbtron' box btw (again, just for aesthetics) but not sure if that's relevant to this issue.

This is for a very simple starter project so at this stage I don't want to over complicate (this will literally be a simple form with a couple of rows, columns and buttons - no JS added at this stage - for a course, so time limitations on anything more grand).

I've attached a screenshot of the 'header style' (the jumbotron - akin to a header but works for me at the moment - next step is to get that tick logo to the right of the 'TASQ' H1 text.

Apologies if I've missed any info out folks

Many thanks.

Screenshot

somapop
  • 27
  • 5
  • Can you share more of the CSS, maybe drop it into a Codepen so we can see what is going on? – Jamie Calder Oct 11 '19 at 13:23
  • Could you provide full example with included Bootstrap please? Btw. you might be interested in [Bootstrap SASS variables](https://stackoverflow.com/questions/46505841/how-to-override-bootstrap-variables-in-sass) - you can modify values before compilation instead of overriding it with CSS. – Jax-p Oct 11 '19 at 13:24
  • Why don't you just add an `id` to the `h1` tag? Another option is to use `!important` for the `#index h1` in the media query but `!important` is usually a last resort for CSS. The issue could also be with how you're writing the media query. More CSS/codepen would be helpful. – Matt Croak Oct 11 '19 at 13:58
  • Absolutely - not sure how much code IO needed to add a this stage and bear in mind it's 'all over the place' as I tryu things out. I've briefly heard of the SASS variables as I was searching for a solution so I'll look further into that. Do you require both HTML & CSS files? Again, some of it is in sketch phase at the moment (just ideas I may or may not pursue) but the task is really just to create a simple 'TO DO' list including a header (you'll see mine isn't technically a Header so I'm probably going to have to include a 'proper' header rather than this jumbotron I'm currently using. – somapop Oct 11 '19 at 16:02
  • Hopefully this will work (I've juist signed up to Codepen - looks like a handy tool): [Codepen](https://codepen.io/somapop/pen/QWWjeJz) – somapop Oct 11 '19 at 16:15
  • https://bootstrap.themes.guide/how-to-customize-bootstrap.html – epascarello Oct 11 '19 at 16:31

0 Answers0