How do I make this design responsive
I want to make my teal designed paged responsive and looking like the "good food" design but I believe I am missing some important piece about the width. I have looked over the markup but I am quite confused about how this is being achieved and why I am having issues with my design.
The teal page must be viewable on ipads, but I am curious as to how the "good food" page was able to have the content not stretch/exceed limits and my page is the current way it is
Here is my html and css.
index.html
Added css as a file because of size limits
9 Replies
When you say you want it to be like the Good Food page, do you mean one section on top of the other?
If so, right now, you're
.left-content and .right-content are both inside of .landing-page.
The .landing-page has a display: flex, so it's creating two columns.
You also have the flex: 60 and flex: 40 on your left + right respectively, so to me, that looks like you want them to be 60% and 40%, which they seem to be.
If you want them to stack, there are a few approaches. The easiest is probably, on the .landing-page, declare flex-direction: column;, and then use a media query to change it to flex-direction: row; at a screen size where it makes sense for them to go next to one another.
If I misunderstood what you're after, let me know 🙂Sorry I didn't explain very well. I'd like the layout to be how it is still. But the page needs to be viewable on an iPad and scale properly.
When I'm using responsive mode on the good food page, the content all scales properly, even when going down to a dimension of 200 x 1200.
But on my teal landing page the content does not scale and as you can see the text inside the button is outside of the button as well as the images on the right content div aren't scaling and they are getting cut off and staying large.
In the good food page when you go down to that size the images and text all scales down to a very small size.
I want that teal landing page to be doing that but I can't seem to understand why it's not and how to achieve that
Part of it is, having two columns, it's getting very narrow, so some things are just running out of room.
Also, you're
<div class="text-wrapper">Smart Room PEC</div> and the text-wrapper-2, these should be headings or paragraphs, and not divs. Or, the second one maybe a button or link, as you're going to click that and either go somewhere or do something by the looks of it.
The .text-wrapper has a display: flex on it, which might be why the text there isn't wrapping as well. I don't think any of the flex stuff there is actually doing anything, either.
I think there's an image in there that could be causing issues as well. an img { max-width: 100%; } might helpI see, would there be a better way to design something like this off the top of your head? I think it's actually okay since its just being used on an iPad dimensions and not going to be seen at a mobile level but how would this be properly done to not "squish" things and have things acting like that? and thank you for the other information, much appreciated
#use grid-template-areas for layouts instead
would there be a better way to design something like this off the top of your head?I wouldn't have it be 2-columns at small sizes 😄 - I'd have to see the layout live to figure out where, but at one point I'd have it stack.
So you're saying you'd create just a single column but stack the content instead?
At small screens, yes. At large, no problem having two columns
Okay, thanks for all the insight. It helped a lot