Personal Portfolio Webpage, i can't move a Phrase

1

hello, i want to bring “a web designer” in the p tag more closer to “Hey i am Issam” in the h1 tag , so i tried to do it with changing the padding-top of “web designer” or the padding-bottom of “Hey i am Issam”
, but both didn’t work for me ! please tell me how can i bring them close to each others ?
here’s the link to my code :
https://codepen.io/SamRad1996/pen/MNPzoV?editors=1100

2

Hi Issam

Use the dev tools in your browser to inspect the elements you want to change. If you scroll to the bottom of the “styles” tab you will see the box model with the CSS property values for the element you are inspecting, if you hover over a property it should highlight it in the browser window for you (Chrome). At the top of the “styles” tab you can add/change properties and experiment with values. Look for the element.style. You can type directly in this space to add live styles to your page.

element.style {
/* add properties here  eg:*/
margin-bottom: 5px;
}

You should see the browser window update. Once you get the spacing/look you want, add the rules into you project CSS file.

Hope that helps :slight_smile:

1 Like
3

FCC doesn’t really teach about resets though they are found on most major websites out there. It helps normalize the HTML. An easy way to fix vertical spacing issues with Heading elements <h1> - <h6>, is to set line-height. I added the property to your heading and it looks better; however, you should experiment with different values and see what you like best.

Also, I would recommend using margin for text elements instead of padding. margin sets white-space externally while padding sets white-space internally. I commented the padding options out and replaced it with a margin option so you can see. In this case it will visually show the same amount of space but will stop other issues from happening in the future.

h1 {
  font-family: sans-serif;
  font-weight: 700;
  font-size: 61px;
  text-align: center;
  //padding-top: 170px;
  //padding-bottom:0px;
  margin-top: 170px;     //**Added
  color:#292C26;
  line-height:.1em;     //*Added
}

Hope this helps

1 Like
4

The default line height of any text has a margin.
You can change the margin or the line-height for both elements, to get the results you are looking for

By the way, nice work :+1:

1 Like
5

thank you so much , i did everything you told me but unfortunately the last step didn’t work for me , i mean after i added the rules nothing happend, i’m not even sure if i did it properly but somoene told me to use the line-height: property and it worked smh . thanks anyway :blush:

6

thanks your answer is more simple . i used the line-height: property and it worked for me smh, wish you the best mate :slight_smile:

7

thankyou so much :slight_smile: