Build a Personal Portfolio Challenge--can't add margin to image!?

Hey guys. I’m trying to finish the Build a Personal Portfolio challenge, but I’m a bit stick with moving my image around. I try to add “margin-right” to move it more in line with the text, but it doesn’t do anything. I’m also unsure as to why the
“Web Developer- Entrepreneur - Polyglot” text is so far below the


line.

I’m pretty sure it’s a problem with a columns, but I can’t figure out what I’m doing wrong. Including code/screenshot below:

Thanks for the help.

Can you post the link to your codepen? It would be way easier to help to see your whole code, and also play around with it to see what works.

Not sure if this is the problem, but on Line 32 you have col-ss instead of col-xs

A couple other things I saw… on line 31 you have a class specifically for a font, and also set the font size in your html instead of in your css. Also, in your css you have important! on your font classes… It’s not what is causing your error, but that is bad standard practice and can cause other problems.

1 Like

It won’t work because it’s inside a bootstrap grid. I suggest moving it to a grid more to the left. Alternatively you could set margin-left to a negative value.

2 Likes

Yeah sure: http://cdpn.io/v/vZazBe

Why is putting important! on font classes considered bad practice?

Okay, I took a look and indeed, it is the column sizes you chose. Remember one row at 100% is 12 columns. Right now, you have 3 columns, an hr taking up 50% the row (col-xs-6), some text < /> taking up 33% of the row (col-xs-4)and your picture only gets a total of 16% of the row (col-xs-2).

No matter what you do inside of a column, its not going to take up any more space than you allow it to have when you set the column sizes…and you’ve given the image column not even enough space to fit the image itself inside of so there is no room to manipulate margins widths Try adjusting your column sizes and you’ll see how it affects your content.

For the important! thing… that’s to solve browser compatibility issues, and it makes the specificity function unusable, which is actually a lot more powerful, cleaner to understand and way easier to debug if something goes wrong than if you’re using !important. Esp as your projects grow in size, you’ll find yourself having to important all the things to fix your prior important things and if there is a conflict, it will be a nightmare trying to go through and find which important is causing the issue.

Also consider, what problem were you trying to solve when you put important on the arvo-font class? Just something to think about as you go through your steps, to know why are taking certain steps.

Google specificity to see how that works, and also google css !important to see more info on that too. Hope that helps!!!

1 Like