Hello.
I have been trying to figure out a design problem for a few days now. I’ve done numerous Google searches, looked at different examples, watched about 4.5 hours of a CSS youtube video, and I am still not able to figure out how to get the page layout I want.
I have four sections in the main part of my page, right? I want to have a block of text next to a corresponding image. I would be happy just to do that at least, with all text on one side and all images on the other side. If I could alternate which side of the page the image is on, that would be nice too.
Like this basically -
text image
image text
text image
video text
I think I would use CSS grid for this layout right? Not flexbox? I’ve been trying to set up a grid, define that element, then grid-items, and define those. But I am just not getting the result I want. I think I have some confusion because the lessons/tutorials use colored blocks with a letter inside. I would love to watch a tutorial that walks through setting up text and images on a page in a grid.
I also feel a little bit lost on responsiveness. I think I need to get into the habit of creating different media queries for different screen sizes, but I don’t even know all of the CSS elements I need to define when the screen-size changes.
I really want to get the hang of flexbox and grid. Do y’all know of any other practice activities I can do besides the one in the course? When I look at examples it makes sense to me, but I just can’t seem to implement these tools on my own.
Here’s what I’m looking at now. Each of the <p> elements will actually be several sentences long at some point. I have the media query element in there, but it really isn’t doing much for the responsiveness of the page as a whole.
These have been trouble spots for me as well. But I just finished my landing page this week (aside from minor touch-ups still to do). To get two things side by side I used flexbox. I wrapped the two (or three, etc) things in a div and then set that div’s display to flex. It will place the things in that div side by side. You can look at mine if it would be helpful at all:
The general advice for when to use flexbox and when to use grid is that if you are working with 1 row or 1 column such as a navbar then flexbox is perfect but if your working with a larger layout then grid is the best choice.
They are not easy to get ones head around I know. Grid has multiple ways of doing the same thing. I quite like grid template areas but others prefer different methods.
Shouldn’t need lots of media queries though if you try to make things responsive in general. Not sure what your working on but for my course projects I never used more than 1 media query in a project but they are very responsive from pc sized down to about 250-300px width which I figure is small enough given how huge everyones phones are now
You can use either Grid or Flexbox. But I don’t see any attempt to do so in the Codepen you posted. Please update your code so we can see what you have tried.
As for having alternating orders of text and images you can use pseudo-class selectors like :nth-of-type or :nth-child and the order property, but for the most part, I would suggest using the document structure instead (i.e. put the HTML elements in the order you want them).
Quick example using grid and pseudo-class selectors
edit: I messed up the order reset, it should be fixed now. Just goes to show using the document structure is easier to deal with.
@lasjorg Hi! Thanks for your response and example code. Your page looks like exactly what I’m going for, and the code looks fairly straightforward.
Because I tried to edit my code before and made some unwanted changes that I had to hunt down and fix, I was testing ideas in Sublime Text. Unfortunately I didn’t save any of the versions I was working on.
I had found this example, which was similar to what I was going for - at least in the full-page view. So I was trying to set up something similar with my own elements. I’ll admit though, there is a lot of syntax in this example that I don’t understand well. https://codepen.io/brob/pen/dKWdVB
The code in your example makes a bit more sense to me, although I haven’t used the > in an element before. I have seen the nth value in some demonstrations, but haven’t tried that. Another question I have about your example is what is clamp?
I’m sure I could google all of those questions… I’m delirious though, so it’ll have to be tomorrow. Thanks again for your explanation and example!
Could you be more specific on what parameters you are after, or where your design fails to meet your criteria?
I find flex to be better fit for when you try to fit lower number of elements in a given space. I use grid for when i have large number of elements and a complex layout. Both designs can be extremely smart and offer lot of tools, make things simple on the surface, but in reality there can be lot of rocks and unexpected behavior. Ive had my fair share encountering such, especially with flexbox. Even experienced programmers report stumbling upon design mischief and discuss on lenght principles and behavior.
Moreover, each layout model offers various ways to achieve a certain task and it is up to you to pick the bext approach, which will put your page well in different circumstances.
One thing that might be good idea, is to use div as flex items and place images inside such, so the image itself is not treated as a flex item, as this can lead to some design struggles.
Making your elements take a certain order canbe as simple as arrange them so in the HTML directly, where you can put text>img>text>img. Another way is to use the flex order property on elements, which can rearrange the elements order.
You could put display flex on the body(or main element, wherever you placed your content) and using flex-direction as row, to set elements size take 50% of a row, this way, 2 items would take one row and the next two will go on the next row. Or you could use direction columns and place each image and its respective paragraph inside a containing element, which will be the flex item. In that case, you might not even need to put flex on the body element as block elements generally take the entire width of the page. You can apply display flex within every div that contains an image and a paragraph(if you choose this approach) and do adjustments respectively. Take notice on elements margins and padding, as those can interfere with the flex flow. You might expect an element to take 50% of the page width, but if its margins are not included in the calculation, it would push the next element on the next row. You can also control the leftover space and devide it between the flex items.
Its another topic of responsiveness and media queries as on smalelr screens you might prefer to make images and next take up the whole width of the screen. In such case you would want to put different flexbox settings, for example make them go in a column direction. Keep in mind CSS rules take effect in order. If you put a media query on top of the rules which tells for smaller screens an element margin to be small and then you have, following it a general rule for all cases for the same element to have large margins, even on smaller screen only the large margins will be in effect as it would override any previous rules applied(thats if we dont talk priority order, such as inline>id>class etc)
Thanks for the responses. I tried to implement the example that @lasjorg gave with my code, but it’s still not displaying correctly. I’m sure I’ve overlooked something. I tried that before restructuring the HTML document because it seemed like it worked so well. Here’s what I’ve got…
Maybe you can spot something I’ve missed. I appreciate your help.
If you display your image as block the text cannot sit beside it. One example of how to put the text next to the image would be to give your grid container display flex, remove the grid stuff. Then remove the display block for your image and give it a sensible size so the text can sit beside it.
It could be done with grid of course but for simply getting 2 things next to each other flex is probably easiest
haha,
I just tried it and it worked for me believe it or not. I gave grid container flex, removed the grid stuff then I removed display block from the image and gave it a sensible size
okay, now that does almost what I want it to! If I use this method, would I want to put each section in its own flexbox? Also, if I wanted to alternate which side of the page the image is on, would I wrap those images in a particular tab in order to float them? Thank you for your help.
I’m sure I’ve overlooked something. I tried that before restructuring the HTML document because it seemed like it worked so well. Here’s what I’ve got…