Image Layout

[rkassebaum]

Say, on the home page. https://honorandremembernebraska.org/. We have two large images. One says Sponsor a Flag and the other says Request a Flag. Looks great on a computer. However, on a smart phone it reduces the images small and stacks them. Is there a way to keep the image larger on the smart phone so they go edge to edge of the screen?

[ruenel]

Hello @rkassebaum,

Thanks for writing in!

You are experiencing this issue because you have added this custom css somewhere in one of the element:

$el .x-column:first-of-type {
    margin-right: 1%;
}
$el .x-column {
    width: 49.5%;
}

Please remove that code and then in the row settings enable the “Marginless Columns” option so that the image will not have any gaps between them.

Hope this helps.

[rkassebaum]

I did that and it worked. However, if I still want a little space between the two images what would be the best way to do that?

[jade]

Hi @rkassebaum,

After disabling the Inner Container option of the Row, please add this code to the Element CSS of the row:

$el .x-column:first-child {
    padding-right: 0.5%;
}

$el .x-column:last-child {
    padding-left: 0.5%;
}

Hope this helps.