[chrishdunnParticipant]

Hi…my site is http://edgazette.co.uk

About half way down the home page is a section called “Latest from the DfE”. There are 3 buttons on the left hand side. I have placed these where I want using margins in cornerstone, and it works responsively as I’d like except when the screen width reduces to the point where the essential grid in the right hand column of the row changes from a 3×2 grid to a 2×2 grid. When this happens, the buttons are displayed half way up their column.

I want them to always be displayed at the bottom of the row. I’ve tried using position: absolute; bottom: 0; in the buttons stlye, but the column div does not extend down to the bottom of the row. How do I make the buttons stay at the bottom of the row?

Also, there seems to be an annoying bug in that the ‘block’, ‘marketing circle’ and ‘open link in new window’ settings revert to ‘on’ when I edit the buttons.

Many thanks,

Chris.

P.S. Cornerstone is awesome!

[Rue NelModerator]

Hello Chris,

Thanks for writing in! To resolve this issue, please edit your page and find the section containing your elements in question. In the row settings, please enable the margin less columns. Once enabled, you need to add some padding on the first column so that it will have some gaps with the second column. You also need to add an inline css to the first column with vertical-align: bottom so that the buttons will always stay at the bottom.

Hope this helps.

[chrishdunnParticipant]

Thanks…that works really well, except that the image in the same column now gets pulled down from the top. Is there a way to keep the image aligned to the top and the buttons aligned to the bottom? (I guess you’d need to create two containers within the column, which I don’t think is possible).

Many thanks.

[ChristopherModerator]

Hi there,

Please add margin-top: -10px; image style field.

Hope that helps.

[chrishdunnParticipant]

That doesn’t work unfortunately…I’ve added a duplicate section so you can see how the image shifts down as the screen width reduces…..http://edgazette.co.uk/

[ChristopherModerator]

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[chrishdunnParticipant]

Hi…here’s a better explanation hopefully…I want two columns side by side. I effectively want to split the first column into 2 rows, with the first row aligning to the top of the column and the second row aligning to the bottom of the column. This layout does not seem possible in cornerstone?

[ChristopherModerator]

Hi there,

Please check the attachment and let us know if we’re looking at the right section which you’re referring to.
Can you provide us with screen shot to show us how it should look?

Thanks.

[chrishdunnParticipant]

Thanks for your help with this….have attached two images (I have setup duplicate sections to help show the problem…the bottom section uses the first solution you suggested).

1/. Wide.png. In the top section, the left hand picture is nicely aligned at the top (but the buttons are not aligned to the bottom). The bottom section has the buttons nicely aligned at the bottom (but the picture has dropped slightly below the top). I want the picture to stay aligned to the top, and the buttons to stay aligned at the bottom.

The second picture shows what happens when the screen width is narrowed…

2/. Narrow.png. I want the picture to appear the way it does in the top section, and the buttons to appear the way they do in the bottom section.

I hope this explains what I am trying to achieve?

Many thanks.

[chrishdunnParticipant]

Sorry…images were too big…have reduced and attached..

[RadModerator]

Hi there,

You can do that by adding gap element between them. You can’t have columns and rows within in. It’ is always rows and column within.

Vertical alignment applies to the container and as a table cell. But the column is a single container and you can’t selectively align element vertically. What you could do is add <table> within that column and set height for each row, then vertical-align them within the table cell.

Thanks.

[chrishdunnParticipant]

Thanks..can I add a table in cornerstone, or do you mean I should make the whole column ‘raw content’ and code a table containing the picture and buttons inside that?

[Rue NelModerator]

Hello There,

I am another staff checking on this topic. Yes probably you can add a table in the raw content element inside the column.

I got another solution for your problem with the current setup. Simply edit your page and find the image element. Add a custom class to the image element like fixed-img so that we can target it using custom css and position it at the top. In the settings tab, Settings > Custom CSS you can insert the following custom css;

@media(min-width: 768px){
  .fixed-img {
    position: absolute;
    top: 10px;
  }
}

We would loved to know if this has work for you. Thank you.

[chrishdunnParticipant]

Fantastic!….works perfectly!…thank you so much for the excellent support.

[chrishdunnParticipant]

Ah….except that it has a strange effect in firefox…the image gets displayed at full size, ignoring the column width!?

[Author]

Posts