I am trying to reduce the amount of space above and below the image which is in the masthead postion using the image module. Any help welcomed. masthead

  • Did you try margin-top: 0; margin-bottom: 0; on the element creating the green highlighted margin? I hope that you researched and tried somethings before posting a question. Always post your attempts to self-solve in your question.
    – mickmackusa
    Jan 8 '20 at 12:32
  • Not enough information to solve this issue. As @mickmackusa said, it could be the margin on the div. But, because of the way collapsing margins work inside CSS, those margins could come from the first and last children as well. I'd agree, start with the enclosing div, and if that doesn't work, come back with more information.
    – Arlen
    Jan 9 '20 at 15:49

I can see you've got the Chrome devtools displayed in the image you uploaded. Using them, if you go to the right hand side and click on the Computed tab then you will see the box model for the html element you've highlighted on the left.

When I installed Purity 3 on my Joomla instance it showed for the element you highlighted a box which had padding of 100 pixels top and bottom, so that's where your extra white space is coming from.

If you then click on the devtools Styles tab and go down it till you find padding: 100px (or whatever it is on your instance) it will then show you the relevant CSS selectors which in my instance are .page-masthead .row-feature.

What you need to do is override what is defined by default in this template, and you do this by specifying what you want in a custom.css file which you put in your templates/purity_iii/css folder.

So try putting something like the following in that custom.css file:

.page-masthead .row-feature {
padding: 5px 0; 

You might need to repeat this for other elements enclosed within this element to fine-tune to exactly what you want.

Defining your overrides in this custom.css file should mean that they shouldn't be overridden if you upgrade the purity 3 template (but it's always prudent to keep a backup offline, just in case).

  • Many thanks Robbie. I will give it a go with the custom. I have gone through all the margins and padding in the css and not really gotten anywhere. Will post up after I have done the custom file. Jan 14 '20 at 14:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.