So I am make a portfolio for myself and am new to html and css. But I am having trouble trying to bring what I designed in Photoshop to life. This is what I have
I am having trouble with the grid system, I used http://www.responsivegridsystem.com/calculator/ to get my grids. But if you can provide a better grid system that would be awesome. Another issue is trying to line up name: Date: and e.g.. so they are lined up with the image.
Here is my code: https://jsfiddle.net/d31z1z4s/
2
Answers
Your problem is basically that your images are fixed width but your containers are flexible. That presents a problem when the images get to be bigger than the containers.
The solution is to take the widths and heights out of the HTML and include it in the CSS. Instead of this:
Do this:
Now, whatever size your containers are, your images will just fill that space.
If you want to make sure the images don’t go above a certain size, you can use
max-width
on them. For example:Note that adding
will help you with your sizes, so that your containers are always truly the size you want them to be, and not bigger than you think because of the border. Adding
box-sizing: border-box
will include the border in the size.Since you want the images to not get too big, you need to account for what happens when they wrap to a new line. One way to do this is to center the images within their container, and then center the containers within each other. Then, using media queries, ensure the containers are not too wide when the images collapse to two columns and one column, so things still appear correctly centered.
Here’s a snippet where I stripped out extraneous stuff to demonstrate this effect (try running it at full size and resizing the browser window). Compare styles with your own to see what all I stripped out; some of your styles were unnecessary because they were just repeating defaults.
Here’s a Fiddle of that.
That works pretty good, but you may notice that the
h2
is not quite centered at larger screens. We can fix that a number of ways, such as by adjusting the left margin of.row .col:first-of-type
to be more than3.3%
in a media query, or adjust the left margin of the header in a media query, or maybe by just moving the header outside of its wrapper and into a new one that’s always centered.Another approach is flexbox. This takes even less code to get better centering, although if you want to left-align the last item when it wraps to a new row, that’d take additional styles (see here and here).
Compare the HTML in this one with your HTML: I deleted the
.row
elements, and moved theh2
.Here’s a fiddle of that.
To answer your question about what to do with the captions, there are a few options. The examples above use
ul
andli
as you did, which is fine.You could also use a single
p
for each one withbr
tags between each line, or you could even wrap each line in aspan
and usedisplay: block
(since spans aredisplay: inline
by default). You could also put each line in its owndiv
(and optionally wrap them all in adiv
to group them together).Also, if you want creative design
Pls. do check
https://bootsnipp.com/snippets/featured/carousel-extended