Ella Theme Page Layout Issue

[dressingfestive]

Here is link I'm referring to: https://dressingfestive.com/pages/our-partners 

We are using the Ella theme and wanted to create a landing page with thumbnails that link to the collection of each "partner" that we're working with. I added two images and linked them to the collection pages, but I can't get the formatting to work properly.

1. Each image is on its own line, even without a <br> code to separate them.

2. They're not centered, even though the code is in there.

3. There is a ton of white space out to the right of each photo that is "clickable" to the link, but nothing is there. I'm assuming this white space is what's pushing the second photo down to a new line.

Any idea what is wrong in the coding or any suggestions on a different layout that may achieve the look I'm going for? Ideally, it would be three photos per line as we start to add more partners. Is there a page template that is designed to show clickable thumbnails of select collections?

Thanks in advance!

[Guleria]

Hello @dressingfestive ,

You need to write proper html in order to align them in a same line.

or create an alternate template and do html there. 

[makkaomakka]

Hi @dressingfestive ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </body> tag

<style>
@media only screen and (min-width: 680px) {
section#shopify-section-template--15653522800845__main .rte div:first-of-type {
    display: inline-block!important;
    width: 100%!important;
}
section#shopify-section-template--15653522800845__main .rte{
    display: flex!important;
    flex-direction: row!important;
    flex-wrap: wrap!important;
    justify-content: center!important;
    align-items: center!important;
    gap: 15px!important;
}
section#shopify-section-template--15653522800845__main .rte div {
    display: inline-block!important;
    width: 24%!important;
}
section#shopify-section-template--15653522800845__main br{
    display: none!important;
}
}
</style>

Result:

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka