Here’s a one line change to that codepen that allows the grid to be fluid without the need for media queries. It will go down to one column and expand to more columns as room becomes available.
I just mean that you must be clear in your own mind what you want to happen. You can’t just code and hope for the best 
WOW!
thanks for the code!
please see
https://forallthetime.com/grid.html
is this the best way to add text content?
you can see i adjusted the code
can you suggest the best dimensions for each image?
looking at your code, best if i change each of my images in photoshop to width = 500, height at 350?
we are talking pixels, yes?
i saw a height = 850 on line 32
what does iHolder do? is it a class to hold every image individually for styling?
also, how does <figure></figure> work… what is it doing?
i can guess <figcaption></<figcaption> does, that seem clear to me
finally, this is subjective… what’s an appropriate balance of text content vs image content?.. what is most alethically pleasing?
Thanks!!
You remember when I said this?
What did you expect to happen and what did you want to happen?
At the moment the text will just fill the rough same shape as the image would until it overflows and then the text will just run down the page in a column. If you envisage lots of text then no this is not the right approach unless you control the overflow in that element (overflow:auto on iHolder).
On the other hand if you just have a line or two of text then yes that is probably ok.
The code already caters for any size image or various sized images (or aspect ratios) as shown in my example. The images are scaled to fit the available space which is determined by the grid css. You do not need to change the images in photoshop although you don’t want to have massive sized images rendering in a small space as that means a large file size. If you have the facility to crop all images to a suitable size then that will save you bandwidth of course.
In my example my images were never going to be lmuch larger than that so it seems an appropriate size. Usually you would want an image created at the largest size it will be seen so that is can scale smaller smoothly (unless you have very large images and then you probably want the picture element or srcset to offer alternative sizes but that’s a whole different set of questions and ball games). The simpler you can keep it the better.
In height and with attributes of the img tag the measurements are pixels but the unit is not required (or indeed valid).
I couldn’t find that but are you talking about the html height attributes?
<img width="1000" height="1350" src="https://picsum.photos/id/1013/1000/1350" alt="Random Image">
The height and width attributes of html should not have any units and are regarded as pixels. Do not confuse this with css as CSS requires units specified (in most cases).
It is just a class to identify the element. Otherwise you would have no direct reference to the html tag concerned other than using its tag name which would mean you would affect every figure element in your document.
It doesn’t do anything. It is a figure element designed for holding images (figures) and their captions (figcaptions). Look up their usage in the html5 spec for further info
You could just have used divs as you can for anything else but then you don’t have a semantic document. Its like saying how does an h1 work?
Html is a semantic language and you use the best tag that describes the task in hand according to the rules of html.
It depends on the criteria. If this is a gallery then the caption should describe the image enough detail so that assisted devices know what it is. If it is just an image accompanying an article then it may not have much significance if the article is already explaining the subject in depth.
There is no right or wrong answer. It all depends on the context and the task in hand.
you are saying to be clear where i want elements, organized content and the feel of the site? to have a plan of what i want to relate to the visitor?
i am trying to understand what you are saying
Essentially, yes. That’s exactly what he’s saying. Building a web page/app/site is like any artistic venture - you have to have an idea of what the end goal is before you start to build it.
Building something and then going “OOH! I should add this” is a lot of extra work when doing it in html and css because that can often times mean totally rebuilding the structure and markup to do it properly.
Have a plan on what you want the end result to look like. This could be a simple sketch on a piece of paper, a bulleted list of things that have to be included, or a full blown photoshopped image. If you have multiple pages, you have to look for common elements which are consistent across pages to give your users the best experience. Things like that.
But once you have the final product "built " in your mind, you can then figure out how to get there in html and css.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.