hey there !
i got problem in setting margins .
i have used different components like 2 nav’s , about etc and whenever i try to add margin to a single component it is applied everywhere.
Ok ill try again . Have a look at the img
Components
-> nav bar on left as <leftnav/>
-> navbar on top and the little small layer with a border radius in <topnav />
-> about us (with navy color background ) in body which has child elements <about \> and <grid\>
So there is over lap between the small layer in top nav and the body(about)
And when i try to add margin-top property , margin is added to whole page (whitespace at top )
Use backticks to surround inline code – if it looks like an HTML tag, it will be treated as an HTML tag in the forum if you don’t do that, and it won’t appear. So write it like:
`<leftnav/>`
I’ve edited your post to fix it.
And in addition, just for future reference, when you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
Please use the “preformatted text” tool in the editor (</>) to add backticks around text.
If I understand you correctly, you need to add top padding to the about-module--margin--3Zmfi element to push it down because of the fixed element before it.
BTW, that selector name, or the styles inside it, is not really correct. The --margin is going to be seen by people as a (BEM) modifier but all the block styles are inside the selector. You should have the block styles in the block class/selector and the margin modifier in its own class that only modifies the margin.
i used the dev tools and came to find that after removing position:fixed prop it became alright .after some time after browsing on internet came up with solution by adding top:0 to existing position prop
thank you for your time guys been debuging it for hours !!!
really appreciate your effort .