Fotomatic Debugging - Web Dev Skill Path

[student31cs]

What a difficult project…

I only believe it was difficult because I don’t know exactly how to search for examples and questions on the internet quite yet. And my inexperience with web dev stuff. Got through it though, I just had to be patient. THANK YOU STACKOVERFLOW

Here is the page for the project: https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/responsive-design-and-accessibility/modules/css-documentation-and-debugging/informationals/f1-2-c1p1-fotomatic

Here is my finished project: https://student31cs.github.io/fotomatic/

And here is my project on Github if you want to check out the code: GitHub - Student31CS/fotomatic: Debugging excercise on Codecademy

One thing I had a problem figuring out was at the italicized quotation at the bottom of the page. I couldn’t for the life of me figure out how to center it. I think it might be because the logo to the right of it is in a container that rests on the same line? So I should be able to somehow center both of them right?

[usernamegiapreso]

Hey student31cs
it’s always a great satisfaction to finally complete a hard project. I’m happy for you.

I think it might be because the logo to the right of it is in a container that rests on the same line? So I should be able to somehow center both of them right?

Are you talking about CSS, correct?
Can you post an image of the problem you’re seeing? Also a snippet of the code related to that part would be good.

[student31cs]

Yes, sorry, I am talking about CSS.

I haven’t done this before, so hopefully I get it right lol

Image of un-centered quote from cite (bottom of page, above footer):

HTML:

CSS:

[usernamegiapreso]

Alright.
So you want to center #quotes-section>div.content.
Try this styling:

#quotes-section{width: 100%;}
#quotes-section>div.content{width: 90%; text-align: center; margin: 0 auto}

Be sure that width: 100% applied to #quotes-section is the width of the body. Otherwise write
width: 100vw;

Let me know

[student31cs]

Right, so by making the parent div fit across the entirety of the web page, the child with a slightly smaller width is able to span across and center?

I don’t completely understand how that worked, but either way thank you very much!!

I’m going to jump into a little research so I can try to understand why

[usernamegiapreso]

centering elements in css is the most common issue every developer finds itself. Is a great thing you research the topic as there are many different ways to do that. The only way to actually master somethin is to DYOR

In your case I suggested to make the parent div 100% of the viewport in order to give you:

1. responsiveness
2. a div.content centered in respect to the center of the viewport.

If for example you wanted it centered in respect of something else, the styling rules would have been different.

[ar0nd]

Hi! Try:
.content {
text-align: center;
}
It works for me. I hope i’ve helped.

What happened to me was that the image appeared HUGE! I don´t know… i just closed and opened the navigator and it worked haha.