Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 5, 2021 at 9:21 pm #1278176
    odmv

    Hi,

    I’m trying to set two different vertical aligns on a grid section. In the center the first image and in the bottom the last fours columns. Any ideas how I can set it this way?

    Thank you!

    February 7, 2021 at 5:56 am #1278407
    Rikard

    Hey Oscar,

    I’m not sure I understand what you are looking to achieve. Could you try to explain a bit further, or post a screenshot highlighting your intentions please?

    Best regards,
    Rikard

    February 7, 2021 at 9:26 am #1278415
    odmv

    Hi Rikard,

    Thank you for your response. Sure thing, on green the content should be in the middle. In blue, the content that should be in the bottom (vertical align).

    Regards

    February 8, 2021 at 8:22 am #1278564
    Rikard

    Hi,

    Thanks for the clarification. If you assign a class to the bottom 1/4 element, for example bottom-column, then you add CSS like this in Quick CSS:

    .bottom-column {
  margin-top: 100px;
}

    Best regards,
    Rikard

    February 8, 2021 at 10:02 am #1278585
    odmv

    Hi Rikard,

    Thank you for your response, but I want to avoid using a margin so the elements can adjust more adequately to different screen sizes. Right now the “grid row” is using a “center vertical align”, how can we set a “bottom vertical align” to those 4 columns? Which already have a class assigned if needed.

    Regards

    February 9, 2021 at 7:16 am #1278948
    Rikard

    Hi,

    Try this in Quick CSS:

    #imagen-inicio .flex_cell.av_one_full {
    vertical-align: bottom;
}

    Best regards,
    Rikard

    February 9, 2021 at 8:26 am #1278959
    odmv

    Hi Rikard,

    Thank you for your follow-up, the code works, but the image circled on green also aligns to the bottom (it should stay at the middle).

    Any ideas?

    February 10, 2021 at 4:20 am #1279293
    Rikard

    Hi,

    Try this instead:

    #imagen-inicio .flex_cell.av_one_full {
    vertical-align: bottom;
}

#imagen-inicio .column-top-margin {
    margin-top: 100px;
}

    Best regards,
    Rikard

    February 10, 2021 at 4:38 am #1279297
    odmv

    Hi again Rikard,

    That last code was similar to the first one. I ended up using percentages, and it seems it did that trick. I’ll make some adjustments on mobile, but kind of works now.

    Would be great to be able to have different vertical alignments on grid rows.

    Thank you!

    February 11, 2021 at 11:49 am #1279715
    Rikard

    Hi,

    Thanks for the update, and feedback. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.