Hey guys,
Need some help. I would like to remove the white space below the Price / Zip Pay Logo https://www.diyseccams.com.au/hikvision/security-camera-systems/diy-6mp-dome-kit-6x8
Screenshot - https://imgur.com/vooheLX
When I remove the clearfix though it forces the ZipPay Div out of the content area and I can’t align it back with the price
Screenshot - https://imgur.com/Eqt9jcy
Can anyone help me as to where I’m going wrong?
You are looking in the wrong place.
The gap you see is caused by the top:-40px you applied to the logo plus the margins on existing elements. You used relative positioning (and a magic number) to get the logo into position but relative positioning does not move anything physically. It moves the element visually but in essence still occupies the space it originally did (i.e. the space where the element was is always preserved). Thus when you move it by top:-40px you get a 40px of space where the element originally resided. Relative positioning is not meant for structural changes like this where the flow needs to follow the elements actual position.
Instead you should have floated the logo to the right before the html for the text that you want to the left (although these days we would use flex to avoid html order dependencies).
A quick fix is to use a margin-top instead of top and them remove the margins from elements adjacent.
i.e.
.widget-tagline{top:0!important;margin-top:-40px;}
.content_prices{margin:0;}
.product_attributes {margin-top:0;}
Avoid using !important as that is a sign that you didn’t understand specificity and means that I have to also use !important to over-ride your rules.
The reason you though that clearfix was at fault has to do with block formatting and margin-collapse which is something that needs to be studied in detail as its effects are far and wide
Hi Paul OB,
You’re a legend!! Thank you for pointing out my silly !important rule that I forgot I added.
Your suggestion fixed the issue and it now looks great
Regards,
Motion
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.