Menu icon Foundation

Designer

My Posts

  • 8
    Replies
  • Offset or..?

    By jd payne

    offsetcolumns

    Im just learning this whole thing and have created a VERY basic 2 column page two try and understand some concepts. I defined a couple rows, each with medium-6 columns and then each column has a panel with some text. As i resize from desktop size to s... (continued)

    Last Reply by jd payne over 4 years ago


My Comments

jd payne commented on jd payne's post over 4 years

Sweet im on it! Thanks.

jd payne commented on jd payne's post over 4 years

Thanks much. i think you have me going in the right direction although that solution didnt really do it. I did however try some alternatives, including the nth-child such as

@media only screen and (max-width: 990px) and (min-width: 640px){
.row:nth-child(3) .columns:first-child{
  position: relative;
  top: -123px;
}}

but the results are inconsistent as the page size changes. I think your original suggestion of the masonry grid is the best solution but i am really trying to get my arms around one philosophy at a time :).

Do you suppose there is a way to integrate that masonry capability within this framework? Anyway, thanks for your time on this...cheers.

jd payne commented on jd payne's post over 4 years

ok thanks for that reference. i thought i saw an example once where someone used a nth-child and then a negative position property.

jd payne commented on jd payne's post over 4 years

thanks for the reply i must've missed the div tag when i clipped the code from the rest of the page. The image is actually square and lined up properly at full size - what you are seeing is the image getting a bit smaller as the page is made smaller. Im really not interested in stretching the image - i want the text below it to fill in the gap. I will keep searching for a solution.

Posts Followed

  • 8
    Replies
  • Offset or..?

    By jd payne

    offsetcolumns

    Im just learning this whole thing and have created a VERY basic 2 column page two try and understand some concepts. I defined a couple rows, each with medium-6 columns and then each column has a panel with some text. As i resize from desktop size to s... (continued)

    Last Reply by jd payne over 4 years ago


Following

    No Content

Followers

My Posts


My Comments

You commented on jd payne's post over 4 years

Sweet im on it! Thanks.

You commented on jd payne's post over 4 years

Thanks much. i think you have me going in the right direction although that solution didnt really do it. I did however try some alternatives, including the nth-child such as

@media only screen and (max-width: 990px) and (min-width: 640px){
.row:nth-child(3) .columns:first-child{
  position: relative;
  top: -123px;
}}

but the results are inconsistent as the page size changes. I think your original suggestion of the masonry grid is the best solution but i am really trying to get my arms around one philosophy at a time :).

Do you suppose there is a way to integrate that masonry capability within this framework? Anyway, thanks for your time on this...cheers.

You commented on jd payne's post over 4 years

ok thanks for that reference. i thought i saw an example once where someone used a nth-child and then a negative position property.

You commented on jd payne's post over 4 years

thanks for the reply i must've missed the div tag when i clipped the code from the rest of the page. The image is actually square and lined up properly at full size - what you are seeing is the image getting a bit smaller as the page is made smaller. Im really not interested in stretching the image - i want the text below it to fill in the gap. I will keep searching for a solution.

Posts Followed


Following

  • No Content

Followers

  • No Content