challenge 02 conquering-responsive- layout Error
please, can someone proofread this code and check if this is also a responsive way of writing CSS and possibly provide a solution. i feel like I may have done something quite different from the norm. The code is below:
https://codepen.io/Collins-Cypher/pen/jEbBRpB
18 Replies
I mean I wouldn't do it like that, but I'm also not entirely sure what it is you're trying to do here.
When you view it at a smaller size, do things behave the way you want them to? Because I wouldn't want what it's doing, that's a lot of space that's going unused, and that's fine on a larger screen, but not so much on a smaller one.
This looks like it might be a homework assignment so I'm not really willing to do the work for you lol, but as a hint, part of the issue lies with the 50% width you're giving
.intro-content. You might want to change the HTML some like the instructions suggest and try something else.@Ray I think my major problem may lie in how it display on smaller screens otherwise I think the width 50% assigned to the .intro-content is needed to keep both contents at the middle. because if i get rid of that, the elements move to the left side of the viewport. at this point, i beleieve i have a problem with how max-widths works.
The 50% isn't what's keeping them in the middle, that's what
margin: 0 auto; is doing. 50% in this context means they're only being allowed to take up 50% of the space in their container, and they seem to move to the left when you change it because, by default, text is aligned left. Does that make sense?If I get rid of the width 50% margin: 0 auto ; doesn’t seem to keep it in the middle unfortunately. I just tried it.
Right, because now they're allowed to be as wide as they want, and one of them has a container nested inside of it that has a max width of 750, so it's only allowed to get that wide, while being in another container that's wider
If you get rid of
margin: 0 auto; and leave the width: 50% you'll see they aren't centered like that, eitherYes they aren’t. Let me figure something out.
You're very close to having it right; max-width is going to be the key here.
Max-width confuses the hell out of me 🤦🏿♂️
Where are you struggling with it? Like, what's confusing? I might be able to help clear that up
I just think if you have to set max-width , it might be pertinent to set width as well on whatever you want to do. You probably could just school me on what max-width could do here and wouldn’t.. if you can
So if I have a webpage with content whose width I only want to be so wide, I set a
max-width of some pixel amount, and, additionally, I might set a width: 100%; onto it as well. That way, it's forced to always be at its max width, but is still allowed to shrink if needed.
So for example, you have an element that you want to be 750px wide at maximum, right? It gets that wide, and only that wide, when you fill it with content, but say you don't have enough content to fill it with. Setting width: 100%; on it will force it to be that wide, regardless of whether or not there's enough content to fill it.
Does that clear it up? That might be a pretty big hint on how to get this working, too.
It might be helpful to set another background color on each of your divs so you can better see what's doing what, and then remove it when you're doneOkay let me try
if you're looking for examples of how this is done, there's a ton in the #conquering-responsive-layout channel. That's also technically the place to ask for help with CRL challenges
it just dawned on me what CRL means, i was wondering what that role was for
haha, makes sense 😄 there's always been TooDamnMany ThreeLetterAcronyms
ah yeah much better!! nice work!
thank you