HTML / CSS Assesment

I’m having a bit of issues with a few things.
The text for the card, when I don’t specify the text size it fits and lines up perfectly but when I set title to 22px it moves over to the side like it is in the picture.
600px for smaller screen sizes, when I resize in browser making the screen less that 60px takes all formatting off the form. I’m not sure what’s making it do this.
and lastly the transition: I have it laid out but I don’t see it happening when I try it in browser.

For the text I have tried pushing it around with margin and padding but it wont get it all the way over there. For the screen size I have a min-width declared but I’m cant tell if I need more to it.

I’m sure it’s clear I’m new to this but any feedback I’d really appreciate it.

Good morning, and welcome to the forum!

First off, congratulations on getting this far. CSS can be a challenge, especially if you are new to code, so don’t be afraid to ask questions!

You mentioned that you have a min-width declared, but I don’t see it in the screenshot above. I have a feeling there might be some clues as to what is going on in that section.

If you can share your HTML (so I can see how your classes for cards and containers are set up) and share the CSS related to the screen size, I can help you troubleshoot.

Jesse

HTML for the card

for some reason its only letting me upload one photo per post.

The top long one is the one for the card.

Hi Taylor,
I can see why you are losing the formatting for the form when your screen is under 600px wide.\

I see that you have a media query set up for the wider screens (@media screen and (min-width:600px), which includes a lot of formatting for the form.

Outside of the media query, you have some CSS targeting the form, but it doesn’t include as much formatting. This means that you are only applying the formatting (margins and padding, for example) when the screen is wider than 600px.

If you need this formatting to show up on narrower screens, it would need to be defined in the form section outside of the media query, or include it in a media query specifically targeting the narrower screen sizes.

In addition, I would recommend taking a closer look at how you have used max-width and min-width within your form sections. As is, this code will likely not pass the form width tests. Generally speaking, you want the form width to take up the full width of the screen if the screen is less than 600px, and remain at 600px wide for all screens wider than 600 px. I’d recommend taking a look at the Building Forms in HTML lesson - there is a section about form width at the bottom of the section.

Let me know if you have any questions after playing around with your width. There are several ways to accomplish this - some people implement the functionality with media queries, while others accomplish it without queries and just defining properties related to form width.

Jesse

okay I reviewed that lesson and cleaned up the formatting a little. It now moves and resizes a tad but at a certain point it stops moving and the window cuts off part of the form. The form still stays styled which is awesome

do I need to declare a min-width? with another media query?

Also am I’m messing around with it now while going through the lessons, it seams position:relative; and top:70px; is not changing anything on the page. looking at the rest of the code I’m not seeing if I have it have it blocked by something else. could a text-align:center take over. it is in .card. I have the position relative specified for the container in which the text is in. does .card take first priority?

Do you have any CSS applied to the form outside of your max-width media query?
From the code snippet above, I can see that you are controlling the width of the form on screens narrower than 600px, but I don’t see anything that is defining what should happen to the form if the screen width is wider than 600px. You may have taken care of this already, just outside of the screenshot.

If not, you could use another media query, or just apply css to the form outside of a media query to control the width for the wiser screens.

Jesse

I added another media query and it worked flawlessly! Now there is a bit of spacing weirdness going on with the right side of the form. it was stretching all the way to the width of the form while the left side stayed as it was with the space between the text and edge of the form. i was able to move the right side by adding some padding and it looks better but it is more padding than the other side.

this is the css with the extra padding-right:2em; when I take away the padding-right and just leave the padding: 1em; as i had before and it looked symmetrical, the right side goes all the all to 600px.

this is how it looks with the extra padding. it looks mostly normal when in full screen but the difference is noticeable when the screen is smaller.

Hi Taylor,
Glad to hear that the form is working well with the new media query.

As for the padding, I wouldn’t worry too much about that detail at this point. I think you will likely be OK with or without the extra 2em.

Jesse