Qua theme CSS heading font size change

  • Unknown's avatar
    helenhemingway · Member ·

    Hello,
    I’m using Qua theme, which I understand is fairly new so I can’t find an existing answer to my query. When I go to to Appearance >> Customise, I can find Theme Options and CSS but don’t know what to do from there, as I’m not a CSS expert but I would like to see the code I need to replace using CSS for the following two changes:

    I want to lose the white space on the homepage, there is a lot at the top due to using the font Museo Sans in ‘huge’ to construct our logo.

    I also want to decrease font size in ALL page titles: ‘Portfolio’, ‘About’ ‘CV’ etc

    I want to add contact details in a header, rather than DIY our own image and insert into ‘add logo’ space in Site, Title and Logo tab.

    All help would be greatly appreciated

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, in the page content, there are two links at the top of the content that have errors in them and don’t show at all and they are holding space at the top of your page content. Open your main page in the page editor, switch to the Text tab and you will see those lines. Delete those lines and things will tighten up considerably.

    This custom CSS will tighten up the spacing above the site title. I’ve limited this change so that it doesn’t cause issues on smaller devices such as tablets and phones. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

    @media screen and (min-width: 768px) {
  .site-header {
    padding: 0;
  }
}

.home .entry-header {
    display: none;
}
  • Unknown's avatar
    helenhemingway · Member ·

    Hey there, thanks for this but not quite sure it’s made a difference.
    I deleted the incorrect links, and perhaps I entered the CSS code in wrong – but there is still a lot of space at top of pages.

    I’m doing this for a friend’s business, she needs to go live asap – would you please work with me on this to resolve the issue of too much space and font size – would really appreciate it.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, I double checked the first CSS rule above and it works, but I’ve made one small change to it. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS. 

    @media screen and (min-width: 768px) {
  .site-header {
    padding-bottom: 0;
  }
}
  • Unknown's avatar
    helenhemingway · Member ·

    Hi Sacred Path
    Is the CSS rule the one I use to delete the spaces. Where do I insert exactly, as need it across every page really? I’m new to CSS so ery confused.

    And the font size reduction CSS, how do I find that – as want to decrease font size in every heading.

    Will try the above rule now….

  • Unknown's avatar
    helenhemingway · Member ·

    I tried it but it hasn’t worked – you are free to do it, I just can’t figure out what I’m doing wrong?

  • Unknown's avatar
    helenhemingway · Member ·

    I want to delete space above sit title and below the menu. The decrease the font size on all headings. My CSS knowledge is scant, sorry – you are free to do it for me if you don’t mind..

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, the CSS I gave was between the comment designators
    /* and */
    so the CSS was not being applied. I’ve removed those for you and also added a top margin of 0 to tighten up the spacing above the site title. See what you think and let me know.

  • Unknown's avatar
    helenhemingway · Member ·

    Sacred Path, that looks great – thanks for doing that – so helpful, I don’t know what I’m doing wrong. I would also please like to get rid of more space around the site title and menus, and decrease font size of headers. How do I go about that, please?

    Many thanks in advance.

  • Unknown's avatar
    thesacredpath · Member ·

    See what you think of this. Delete the CSS we have now and replace it with the following. 

    @media screen and (min-width: 768px) {
  .site-header {
    padding-bottom: 0;
  }
  h1.site-title {
    line-height: 1;
  }
  h2.site-description {
    margin-top: 0;
    padding-top: 0.3em;
  }
  .main-navigation ul a {
    padding-top: 0;
  }
  .main-navigation ul {
    margin-top: 0;
  }
}

.wf-active h1 {
    font-size: 35px;
}
.wf-active .site-title, .wf-active .text--title {
    font-size: 45px;
}
#page {
    padding-top: 0;
}
  • Unknown's avatar
    helenhemingway · Member ·

    Thanks for that code, I was able to play around to get the results I wanted for homepage. I realise I didn’t delete the /*s in CSS field as didn’t know I had to.

    However, the font decrease request I have is not for the site header + title. It is for the pages on main navigation – if you click on to the respective pages, there titles on there are way too big for the page. I would like to decrease those then I will be done :) All help appreciated!

  • Unknown's avatar
    thesacredpath · Member ·

    Ah, ok, for the page titles, add the following and adjust as desired. Originally it was 72px and I used 40px just as an example. 

    .page .entry-title {
    margin-bottom: 1em;
}
  • Unknown's avatar
    helenhemingway · Member ·

    That’s great Sacred Path but it only tightens spaces – I really need to decrease the font on page titles – still haven’t done that yet. Once I’ve done that, I’ll be all done…

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, add this and adjust the font size as desired. 

    .wf-active .page .entry-title {
    font-size: 30px;
}
  • Unknown's avatar
    helenhemingway · Member ·

    Hi, that was exactly what I was looking for – thank you so much for all your help SP! :)

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Qua theme CSS heading font size change’ is closed to new replies.