I need some help with my tribute challenge

I need some help with my tribute challenge
0.0 0

#1

Hello campers!

I’m new to this community, and I started my tribute challenge today. I didn’t know what to write about, so I just tried to remake the example page from scratch, guessing the font sizes, colors, spacings and everything else until the result looked similar.

My page: https://codepen.io/erikian/full/xVoJwq/
Original page: https://codepen.io/FreeCodeCamp/full/NNvBQW/

My page has several problems:

-when zoomed in, the page width changes and all the text blocks below the image get narrower;

-I couldn’t manage to put white borders around the gray box. When zooming in, a wide border appears on the right side;

-I tried to do some spacing between the image and the text right above it using padding (both inside in the image and text elements), but it didn’t work. I also tried to use border-radius to change the gray box’s edges - no success.

I did some research, but I couldn’t find any ways to fix these issues. I started to code using HTML yesterday, so I’m relying essentially on the challenges I’ve already completed to build this project.

My questions:

  1. Can I use the same content from the example page? How can I mention the original author in my page?

  2. How to fix the text issue when zooming in? Is there something like a “ordered-list” feature?

I’d like to add that I’m very excited about FreeCodeCamp!! I just can’t stop to work in the challenges (that’s why I “copied” the example tribute page - I want to take the other challenges as soon as possible).

Thank you in advance,

Erik


#2

Sorry, but I’m not sure I understand the first two problems… It may be due to lack of sleep.

I also tried to use border-radius to change the gray box’s edges - no success.

Try doing this. The way yours is set up, the gray box is the ‘container-fluid’ class. Now, personally I would add a custom class and do it with that. Like, ‘page-content’ and then replace .container-fluid with that in the code below:

.page-content { border-radius: 5%; }

-I tried to do some spacing between the image and the text right above
it using padding (both inside in the image and text elements), but it
didn’t work.

You will need to use margin-top in your img-box class in css. Margin is space around the item, padding is inside. So if you have content in a container and use padding it moves it in from the edges.

Example:
margin-top: 15px;

  1. Can I use the same content from the example page? How can I mention the original author in my page?

Yes, you can use the same content, but it can be more fun, and rewarding, to choose your own subject, and create your own site. Don’t take that to mean that there is anything wrong with building an exact replica. But, always be trying something new. So you can learn more, and how to get unstuck when you hit an issue better. Also, you can add some text, with a link to the original work, if you want to credit an original author.

Example:

`

Whatever you want to say to credit it to Original Author

`
  1. How to fix the text issue when zooming in? Is there something like a “ordered-list” feature?

I’m not sure what you mean about your zooming, but there are ordered lists in HTML. Instead of using <ul> you use <ol>.

From W3.org:

An ordered list, created using the OL element, should contain information
where order should be emphasized, as in a recipe.

I hope this helps, and that you have fun learning how to code. :slight_smile: and welcome to the community!


#3

I’m from Brazil, my English sucks :grin: Let’s try again:

This is what happens when I zoom the page:

Notice the white border on the right. It gets huge when I apply more zoom. There’s no white border on the left size - the gray box covers it.

Now, the original page at maximum zoom:

It has white borders around the gray box and the text is adjusted to the page width.

I fixed the rounded border and the image spacing issues by following your advice. I also added a footer to credit the original author.

As for the “ordered list”, I meant “responsive list” (maybe you’re not the only person who isn’t getting enough sleep). I want my list - and also the paragraphs below it - to be “responsive” (I don’t know if that’s the right word) under any level of zoom.

Yes, you can use the same content, but it can be more fun, and rewarding, to choose your own subject, and create your own site.

I agree with you - I think I’m going to make the final adjustments in this project and start another one so I can submit something new. Now that I have a little experience, this will become easier.

Thank you!!


#4

I’m glad I was able to help!

I’m at a social event now and don’t have access to my computer. But, if nobody answers before I get back to it, I’ll do my best to sort out and explain a solution to help you.


#5

Alright, @erikian, if you are zooming using Ctrl + scroll, then that’s all wrong. That won’t show you how it looks on mobile. I used the developer tools to view the page in mobile view and it looks perfect. The white borders are very small, and everything seems to be perfectly responsive.

Responsive Design Mode Instructions:

Firefox

Google Chrome

Use the instructions above for whichever browser you use to test how your site looks in responsive mode.


#6

@ronbecker That’s how my page looks in responsive design mode (I’m using Firefox 46 and Xubuntu 14.04):


#7

Hi, new member here as well.

One problem I noticed is that you did not design the page in a responsive way. For example, the style of #list1 has padding specified by hard-coding pixels. This is why your page did not scale correctly, because the padding on left/right are fixed pixels.

The simplest way to fix this, along the lines of what freecodecamp is covering, is to use a responsive framework. Freecodecamp teaches Bootstrap, and if you put your list in a container with responsive width (for example, “col-md-8 col-md-offset-2 col-xs-12”, you should see your content scale responsively.

Hope it helps and happy coding!


#8

@soarer I used col-offset-2 and it works like a charm. Thank you very much!!

One more question, I needed to add this class to every paragraph I wanted to fix. I tried to put them inside a div element and then set the container class to col-offset-2, but I don’t think it worked. What am I missing?


#9

Actually, a single “col-md-offset-2” code is not a good practice; if you want a truly responsive design, you probably want to tell computer how much space to leave there in all cases. See http://getbootstrap.com/css/#grid-intro for an introduction to grid system.

In any case, like I told you earlier, you have hard-coded many spaces by actual pixels. A single col-md-offset-2 acts as a magic pill to cancel those off here. So rather than adding col-md-offset-2 in every tag, you should try to remove every single hard-coded padding in your css (i.e. those that involve actual number of pixels). Then surrounding things by a div would work.


#10

I will change my code and post the results here when I’m done. Thank you again!!


#11

I have followed @ronbecker’s advice and crafted another page. You were right - it’s very rewarding, especially because it’s about something I truly love: coffee! :grin: :coffee:

http://codepen.io/erikian/full/EyYeJR/

I banned all hard-coding from my CSS, except font sizes. I have tested it using the Responsive Design Mode and I think it works well, but I would appreciate some feedback (especially about my writing, since English is not my first language).

Thank you again!


#12

Great job, bud. Looks clean, and the writing is great (especially considering isn’t your first language). A couple little things, just to make it easier on you. For your footer, you don’t actually have to give it an id. You can style it in the CSS like this:

footer {
  background-color: #331a00;
  color: #a3a3a1;
}

And, unless I’m mistaken, you have margin-left, and right both set to auto, but you should be able to get the same result (again unless I’m reading wrong again) by doing this:

margin: auto;

Neither of those are major things, or anything you need to change. It’s just a few less keystrokes when coding. :stuck_out_tongue:

You project looks great, though. Keep it up!