Margin problem in gatsby.js

1

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.

(https://codesandbox.io/s/github/hussamkhatib/astronmy-club-of-vvce?file=/src/pages/index.js)[link to sandbox]

danger
danger1179×241 19 KB

i want the navy color body to come below the cyan color body.tried a lot ,but as i said margin is getting applied to all.

note : the light color blue’s are in component.
the desc of navy in component

2

I’m sorry, but I can’t understand your question.

3

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 )

image
image2448×3264 1.37 MB

Colors are temporary so it will be easy to differenciate
Hope it’s understood now :slightly_smiling_face:

4

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks are not single quotes.

markdown_Forums

5

thanks will take care of it
had a real hard time typing on the phone at that time

6

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.

.about-module--margin--3Zmfi {
  margin-left: 15%;
  background-color: #000033;
  color: white;
  line-height: 1.8rem;
  min-height: 100vh;
  /* padding */
  padding-top: 100px;
}

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.

7

@lasjorg @Bam92 looks like i got where i went wrong .

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 .

1 Like