Ella Theme Page Layout Issue

1 0 0

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!

Replies 2 (2)
Shopify Partner
2782 555 793

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. 


Need a Shopify developer? Email: guleriathakur43@gmail.com

- Skype: navrocks1
- Try GEMPAGES a great page builder.
Shopify Partner
817 153 171

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


@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;




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,


Buy me a coffee

For quick response - Message Me

BFCM: Boost sales with BOGO+ Easy Free Gift Upsell. Enter code "BFWIZZ30" to enjoy 30% OFF.