Responsiveness is my weakness. :) Personal Project - Wedding Website

Code Feedback
1

Hey everyone,

I’m going to work through the Responsive section of the coursework again because it just didn’t click, but I was wondering if I could get some suggestions.

I’m trying to get some extra practice in by working on building a very basic website as a surprise for my friend’s wedding, but I noticed that when I reduce the width of the browser, the H1 elements go up and off the page, and the form aligns weirdly.

I’m also having trouble with the margin or padding being off on the header on the RSVP website. There’s about 5 pixels on the top-left that doesn’t want to work unless is put a margin: -5px; there, but I don’t know what’s causing it to show up there in the first place.

Can I get any tips on that, please?

Home HTML page CodePen: https://codepen.io/wordsthatrhyme/pen/ZEpydMO
RSVP HTML page CodePen: https://codepen.io/wordsthatrhyme/pen/WNGOVvQ

The RSVP page loaded differently in CodePen than how I have it locally. The content is centered and not all the way up at the top in my local save.

P.S. The background images work on my local file, but I don’t feel like linking them in here since I would have to find the website that they are hosted in again, so please bear that no mind.

2

@wordsthatrhyme You don’t need to write <head> tag and <body> tag! Codepen have written for users in the iframe tag for your output preview.

image
image437×517 24.4 KB

If you want to add some tag to <head> tag there is a tool in codepen here:
image
image711×509 32.7 KB

Click the setting and click the HTML and you can see it.

2 Likes
3

Thank you. I’ll make those changes now. Do you have any other recommendations on making this a responsive website outside of CodePen?

4

Hi there,
Looks like a fun project.
I noticed that if you change your main style to this…

main {
  text-align: center;
  padding: 2%;
}

…it seems to make the h1 element behave better responsively.

Also, the RSVP link is white, I can barely see it. But it might go with the background.

Hope this helps.

PS: Many people use the mobile-first approach, and I’ve found it helpful. Design for small screens first, then move to larger screens.

1 Like
5

Thank you so much!

I’ll change the CSS for the main element in my local file and Codepen I’m back at my computer and see how it goes. :smile:
I’m trying to figure out the mobile-first method so that I can use that for my next project.

I might just move my current CSS file to another folder and start from scratch with the mobile-first method in this project as well.

Do you prefer media, grid, or flexbox?

6

I personally prefer flex box, but I’m pretty new to coding, so I just might not have enough practice with grid.

Flex and grid aren’t a substitute for media queries. I still need media queries for responsiveness whether I use flex, grid, or positioning.

1 Like
7

Thanks Adrew!!..It is useful me too

1 Like
8

@wordsthatrhyme, in both of your pens there is a typo;
@media only screens and (max-width:600px)

“screens” is not a valid media type. It should be “screen”
Your media queries will work when you correct the typo.

1 Like
9

Thank you so much! I appreciate your suggestions.

10

Thank you so much!
I’ll correct that now. I thought I didn’t have a good understanding of it since I couldn’t get it to work. :grin: