Image moving when I go to 'Full Page View'

This is my first post so hopefully I’m doing this right. Anyways, I’m having issues with my two images in the header portion of my tribute page. While in edit mode they’re perfect, but when switching to ‘Full Page View’ they move down and inwards slightly. How do I prevent this?
Also, any constructive criticism would be highly appreciated. I’ve only been coding for a couple weeks and I feel like my code is an absolute mess. I would like to add that I technically passed this challenge, and I started to work on the Survey Form but I’m just too unsatisfied and decided to come back.

https://codepen.io/truxcmd/pen/NWdpdpm

User Agent is: Mozilla/5.0 (X11; CrOS aarch64 13597.105.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.208 Safari/537.36.

Challenge: Build A Tribute Page

Link to the challenge:

Welcome @truxcmd!

Your tribute page is awesome. I enjoy the colors and the layout.

Regarding the images dropping, I can’t be sure what is causing it. I suggest looking into flexbox as it will help align your header.

Here are some issues in the code:

For HTML:

  • The HTML code is pretty clean. If I had to say something, I would say the code needs to be cleaned up in terms of spacing. It doesn’t have a good consistency.
  • The pictures don’t shrink upon page reduction although not a requirement to pass. Not sure if this is taught in material. Referring to media queries.

For CSS:

  • #tribute-link { color: #FF00FF; font-size: 20px; hover: blue; } ← “hover:blue” should be removed as you have already declared the hover color directly below it.
1 Like

hi @truxcmd . You do some common newbies mistake when approaching codepen(same i did). You should get rid of the <html>, <head> and <body> tags in your html code. The head section is already defined in the codepen HTML settings(you can access them at the top left corner of the HTML window). <html> is also predefined behind the scenes, you should not worry about it. And about the <body> tag, this is actually the whole HTML codepen window, anything you write in it is the document body itself.
Your page has some serious responsiveness issues, but thats normal when you start out and things only improve with time and practice. If you check the codepen change view button, there is “Editor Layout” choices on the bottom, you can pick one which puts the code editors on the left/right and your web page on the opposite site. This way you can drag the border between the editors/page and see how your page responds to different window widths. At smaller width, the image in the middle shrinks extremely much. Some margins/paddings of your page also remain unchanged, which squeeze your text paragraphs to very small dimensions. The problem with your two side images is, they use position: absolute , which removes them from the regular flow of the page content(puts them on top of the content even) and they position themselves accordign their position to the window, disregarding surrounding elements. I suggest ypu read further on absolute and relative positioning, as my explanation is vague and inaccurate.

1 Like

Thanks for the welcome @mb1as, well as the compliments!

I greatly appreciate your feedback and will be fixing the things you suggested as well as do more research on media queries. Again, much appreciated!

Thank you for telling me about the Editor Layout @Sylvant! Those responsive issues are appalling. :confounded: I’ll get to work on them right away.
Also I had a feeling those tags you mentioned were unnecessary as I looked at other codes and saw they weren’t included, but I felt like I should get used to using them and figure out how to do so properly for when/if I don’t use codepen. I find it odd they define those things for you, it takes away some of the practice. Nonetheless, thank you for taking time to help me out and thank you for all the feedback.

I agree, im already quite ahead with the front-end web design, but im so used with codepen im barely able to manage in some more native environment like VS Code :slight_smile: , but dont worry about it. When you start the front-end curriculum is where you should consider try something like VS Code to taste things in their more raw form. For now focus on getting familiar with html/css syntax

Duly noted. Good luck with VS Code.