4 replies [Last post]
makamo66
makamo66's picture
Offline
newbie
Last seen: 16 weeks 1 day ago
Timezone: GMT-5
Joined: 2016-01-15
Posts: 6
Points: 8

I added a grid to my page here:
https://projectpotluck.com/bios

The problem with this layout is that when the browser is made smaller, the images don't reach the bottom of the .bioshorts div and the text stays to the left side of the div and doesn't wrap. I attached a screen shot to show the problem.

I show the code here:

https://codepen.io/makamo66/pen/zYEVxBB

AttachmentSize
bios.png207.52 KB
makamo66
makamo66's picture
Offline
newbie
Last seen: 16 weeks 1 day ago
Timezone: GMT-5
Joined: 2016-01-15
Posts: 6
Points: 8

Maybe I should just use

Maybe I should just use floats instead of a grid. What do you think?

makamo66
makamo66's picture
Offline
newbie
Last seen: 16 weeks 1 day ago
Timezone: GMT-5
Joined: 2016-01-15
Posts: 6
Points: 8

I tried the same using floats

I tried the same using floats and it worked out better. You can see the codepen here: https://codepen.io/makamo66/pen/gOGNBdp

makamo66
makamo66's picture
Offline
newbie
Last seen: 16 weeks 1 day ago
Timezone: GMT-5
Joined: 2016-01-15
Posts: 6
Points: 8

It's not looking good using

It's not looking good using floats either. I just need a way to make my text wrap around the images when I use the grid layout.

makamo66
makamo66's picture
Offline
newbie
Last seen: 16 weeks 1 day ago
Timezone: GMT-5
Joined: 2016-01-15
Posts: 6
Points: 8

I stripped away the

I stripped away the superfluous HTML and added a media query. It's still not wrapping when I make the browser smaller. You can see my effort here:
https://codepen.io/makamo66/pen/zYEVxBB