I’m having two issues with my portfolio:
I can’t get my thumbnail images to line up with my hr tag the way my text does in my About section. I’ve tried to change the margins both within the html and the css and it doesn’t do anything to bring them over to the left.
I’m unable to get my buttons to center on the page. I’ve tried to add a wrapper, I’ve tried text:center, I’ve tried display:block. Nothing seems to work.
Where am I going wrong? Thank you in advance for any help you can give!
I’m new here too, so take what I say with a grain of salt.
For centering the buttons, I used “container-fluid” class for the “Contact” section (not sure if that made a difference or not.)
I also styled the “Contact” section in CSS with “text-align: center;”
To get the thumbnails to center, I used CSS “margin: 0 auto” and
"class=“col-md-5 col-md-push-1 thumbnails”" in the HTML.
It’s odd that your thumbnails are defaulting to the right, I had the opposite problem.
Mine is Here
Hello!
That sounds super frustrating! But don’t give up; you can do this.
Somewhere in your CSS, it appears that all of your tags have the property “float: right.” When I removed that, the thumbnail images in your Portfolio section shifted back to the left.
Which buttons are you referring to?
Do you use the “Inspect” (Chrome) or “Inspect Element” (Firefox) tool in your browser? I find it helpful in troubleshooting things like this. Try right-clicking on any part of your web page, and see if there is an option that says something like “Inspect.”
I hope this helps!
Thank you so much! I got the thumbnails to center. I’m still having an issue with the contact buttons not centering even after taking your advice, but I appreciate what you helped me with.
Thank you for the encouragement! I erased the float: right and got my thumbnails to center. I’m still having an issue getting my contact buttons to center, though.
I found the inspect element in Chrome, though I’m unsure how that helps to troubleshoot things. It just showed me my coding, but maybe there’s something I’m missing.
Thanks again for your help, I’m very new to all of this.
Yeah, at first glance it doesn’t seem all that helpful, but what I find helpful about it is the fact that it will show you all of the properties associated with each element on the page.
Would you mind if I walked you through the process I used for trouble-shooting? I’m certainly not an expert, but it’s worked for me so far! (By the way, your portfolio link gives me a 404 error when I try to click on it at the moment, so I’m just going based off memory)
Using your thumbnails as an example, when I selected one, the first thing I looked at was how, and with what colors, the Inspector shaded the element. Blue is the element itself, green is the element’s padding, yellow(ish) is the element’s border, and orange is the element’s margin. The thumbnail had a little bit of padding and margin around it, but not enough to make it stick to the right like it was, so you can rule out the thumbnail’s padding and margin as the culprit.
Next I looked at the thumbnail’s parent element - the container it was in. Again, not much padding and margin on that, so that wasn’t the issue. But I did notice that the parent element was much wider than the thumbnail, and that the thumbnail was actually hugging the right side of the container. That told me that there was some property attached thumbnail itself that was making it do that.
So I selected the thumbnail again, started scrolling through all of the CSS attached to it, and found “img {float: right;}”. To the left of each CSS property is a little check-box where you can turn properties off and on. I turned off the float: right property, and bingo! The thumbnails shifted back to the left. You have found your culprit, and are one step closer to fixing it.
Sorry for the long response, but I hope this helpful!
Thank you so much for walking me through that, it makes a ton of sense now! I’d have never thought to use Inspect Element that way, but I have a feeling it’ll make things much easier for me to troubleshoot from now on.
And I’m sorry about the 404 error–I forked my portfolio in two so I could fiddle with the coding on one of them without losing what I’d done with the other and then deleted the old one and forgot to update my link.
Here is my current link.
Hey BlagDaggery,
Had a completely different issue I was trying to solve, but I came across your idea of using inspect element to be able to individually see everything effecting a section of code, and the changes if it’s toggled on/off. This helped me find the problem so I could fix it. Just wanted to say thank you for posting about your trouble-shooting method!
No problem! I’m glad it helped.