having trouble with placing an image in content1
i tried everything i thought of
i would like the image to NOT get smaller as the view port does.
and help with a media query
an image that is smaller, but will fit %100 once my content is in a single column
help me out?
If you want the image at an exact width then make it exact.
e.g.For a 300px width then do this.
.container> div img {
max-width:300px;
width:300px;
min-width:300px;
}
You need all those because you have default image rules to over-ride.
(Or instead you could set the column to 300px width instead of 1fr,)
When you add your media query for smaller screen then change that rule to say 100% for each of the values.
Hi Paul,
thanks for the assist!
i did all the code you suggested
please see
what does this mean?
i made the image being used in Photoshop at
pixel dimensions
width: 300px height 225px
Document size
width: 7.94 cm
height: 5.95 cm
resolution: 96 pixels / inch
also on larger screen’s there is a hug empty space on the right
also i validated my code. css came back perfect
html came back perfect
the code does not fit, not only in the contents, but also small screens
i kindly ask for an appropriate media query for the images… yes i have tried 
no luck
how do i add more images?
thank you!
i know what that means!
sorry!
You only needed to change the width of the one column not all of them,
Copying the codepen you linked to I assume you are doing something like this.
(Click ‘Edit on codepen’ for full size etc…)
starting to happen!
i saw you put white space around my content
is that better aesthetically?
the code is fine in vs code, but looks different in chrome and fire fox… not sure why that is
the white space is different
i added 2 more images and put them in content2 and content3
looks good!
i adjusted their width to 300px in Photoshop
it seems there is some padding
is that proper?
as i shrink the view port, they line up great!
then i set device tool bar in dev tools and it looks wonderful!
thanks!
if its not too much trouble, kindly explain what you did to the given code to make it look so nice
i want to learn here
No I just set a max-width on the container and margin auto to centre it in the available space. Otherwise your layout would either be fixed to the left or stretch to the width of the largest screen which would be bad for readability.
I did change the height:100vh to min-height as the original author had made a schoolboy error. If you use height then the layout can never grow properly and either overflows or gets scrollbars.
In what way different?
I’m on a mobile at the moment so can’t check but they should look the same. I’ll check when I get back later today.
You never mentioned you were putting images in each column. I assumed it was just column1 had an image and cols 2 & 3 were text content.
If you want images in each column then you probably want each columns as 1fr and centre the image in the available space.
It’s hard for me to second guess what comes next but the basics are in place to adjust as required.
It all depends on the dynamics you need and there are often many ways to do the same thing.
It looks the same to me in Firefox and Chrome although I’d probably set the rows all to auto instead of stretching main.
thanks for the explanation
in chrome and fire fox my layout is fixed to the left on a large screen
in vs code its fine
hhhhmmm…
sorry! honest mistake!
lets leave my options open…
too add images to contents or add text
yes, please
I’m a little confused as my codepen looks the same to me in Chrome, Firefox and Edge. At greater than max-width:1680px the container will be horizontally centered in the viewport leaving white space at each edge. At less that 1680px it will be edge to edge of the viewport with no white space at the edge. It is never just left aligned.
Are you sure you are checking like for like and with browser windows open at the same width?
I can 99.99% guarantee that my codepen looks the same almost anywhere on a modern browser.
Unless you were talking about your implementation of my code and then I’d need to see your actual example?
As far as VScode goes that is largely irrelevant as its not a real browser. Only test on real browsers.
yes, it is fine in the code pen
i hope this helps…
yes, my browser goes beyond and below max-width:1680px still positioned to the left
at width 1218px (in dev tools) there is no white space at all. no white space at each edge… above 1218px white space begins only on the right… meaning my layout is shifted to the left.
does that answer
for you?
if not, please clarify your quote
ok… how about this
if we cant find a solution, i can place in image in my code without a grid and still be responsive
seriously, i truly appreciate your patience here
Can I have a screenshot please and a link to the page in question?
We have a solution to what you were asking for. There is no need to change anything unless your requirements have changed or I misunderstood what you want.
Then it is fine everywhere.
Are we talking about my code that you have copied to somewhere else and introduced a typo somewhere?
There’s something missing here?
Please provide a screenshot and a link to the problem page if it is not my codepen.
BINGO!!!
ok… a story for you
i was putting my newest code into forallthetime.com/
by accident
my goal was forallthetime.com/job.html
shifted to the left 
it occurred to me my problem was both on my desktop and laptop… content shifted to the left
so i cleared my firewall cache through GoDaddy… no go
so i call
for some reason, as above, my code went to forallthetime.com
and it was flawless! perfect white space!
so i take your code pen and save it as forallthetime.com/test.html and use file zilla to put into my site
PROBLEM SOLVED!!!
white space perfect!
NO CLUE why forallthetime.com/job.html did not work… do you have a guess why?.. but that’s now moot
i was simply looking / posting in the wrong place!
CRISIS AVERTED
is it easier / better to place images outside a grid area?
fully responsive
more aesthetically pleasing? (in your opinion of course!)
easier to manage over time?
maybe show some examples?
It depends how on what you mean by ‘grid area’ exactly. I assume you mean a structure created by css grid?
Do you need css grid to place images? No.
However if you want to line the images up easily in columns and rows then css grid is a good solution. It’s not the only solution but as usual in css the devil is in the detail.
You don’t want fully responsive? I believe your exact words were:
That sounds more like an adaptive approach where you reduce the number of columns rather than image size (or a mixture of both).
That’s a design question and doesn’t really relate to css until you decide how you want it to look. Once you have decided how it should look then you can work out the best method to use.
If for example you want your images all shapes and sizes and not aligned in columns then css grid would not be the best choice.
If on the other hand you are forcing the images to occupy the same space then css grid is fine.
I suggest you just Google css galleries and find something you like the look of and then try and code it up yourself.
Lastly you need to be clear on what your requirements are supposed to be. This needs to be thought about in some detail and put into words that describe the behaviour you want at every stage and how to handle ‘extravagant’ content (e.g. words that are too long to fit or images that are too big or too small or wrong aspect ratio).
It’s only when you fully get understand what you want that you can start to build
This was an answer to a previous question in the forums about images in a grid.
sorry. mis-spoke
yes, i would like to site to be fully responsive
your code pen looks great! thanks!
i noticed in the smallest width the images dont lie in 1 column
sorry if i have that wrong
again, i thank you
Are you talking about his first example (not the grid gallery)?
If you are…I don’t really see it, but you easily can fix it by constraining the img1 class
.img1 { width: 98%;}
This will make the image take up 98% of the container, which guarantees if doesn’t overflow the container.
If you meant that last codepen of mine then yes it doesn’t go down to one column because the design didn’t call for it but with another media query that is easily achievable.
It’s late now but I could do a demo if needed tomorrow.
It all depends on what your goal is at the end of the day.
this caught my attention
i kindly ask for a clarification, or a re-phrase, of your statement when its convenient for you
i guess what i am not understanding is what you are telling me in the 2 paragraphs
yes, i would like to start to build
thanks!