Two pictures side by side in page content

TDDFC
Tourist
13 0 1

I would like two pictures to be displayed side by side in the page content rather than one below the other on the desktop. The URL is https://thedeliciousdogfoodcompany.co.uk/pages/about-us

 

Can anyone help me with this?

 

Many Thanks

Replies 4 (4)

PageFly-Richard
Shopify Partner
4322 980 1639

Hi @TDDFC 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
p:has(img) {
    display: flex;
}
</style>

PageFlyRichard_0-1718153738133.png

PageFlyRichard_1-1718153770152.png

While checking on the issue for you, I've a suggestion that might help your page more professional and friendly to your customer 

 

You can consider to add the CTAs button in the banner here, that's will help more easier to direct customer on the page you want. 

 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Kyle_liu
Shopify Partner
52 9 10

Hi @TDDFC 

You can place a table outside the image on the about us page to avoid modifying common properties and affecting other locations

Kyle_liu_0-1718164992279.png

 

Kyle_liu_1-1718165011908.png

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on (liushuaicc@shinetechsoftware.com)
TDDFC
Tourist
13 0 1
Thank you for your reply. Is there a way to make the table grid invisible or centre the images so they look better?



https://thedeliciousdogfoodcompany.co.uk/pages/about-us



Thanks Again

Kyle_liu
Shopify Partner
52 9 10

Hi @TDDFC ,

You can edit Custom CSS,

 

table:not([class]) {
box-shadow: none;
}
table:not([class]) td,
table:not([class]) th {
border: 0;
}

 

 

Kyle_liu_2-1718243658510.png

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on (liushuaicc@shinetechsoftware.com)