Image placement

[lunalucenteskin]

Hi everyone,

For our website we have a section with text and 2 images, but on mobile that looks not very pleasant.

The first picture is how it looks on mobile, but we want the pictures to be way smaller and showcased next to eachother below the text. URL is "www.lunalucente.com"

[BSSCommerce-B2B]

Hi @lunalucenteskin,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

@media screen and (max-width: 740px) {
.m-custom-content__wrapper [id*="m-custom__block--image"] {
    width: 50% !important;
}
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 

[BSSCommerce-B2B · Accepted solution]

Hi @lunalucenteskin ,

We're happy to see that our suggestion helped you solve the issue. Can you kindly mark it as a solution? This can be a reference for other merchants if they have an issue like you.
Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon.

Thanks in advance.

[PageFly-Theodor]

Hi @lunalucenteskin 

This is Theodore 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>
@media screen and (max-width: 740px) {
.m-custom-content__wrapper [id*="m-custom__block--image"] {
    width: 50% !important;
}
}
</style>

Hope this can help you solve the issue

Best regards,

Theodore | PageFly

[niraj_patel]

Hello @lunalucenteskin 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 740px) {
 .m-custom-content__wrapper [id*="m-custom__block--image"] {
        width: 50% !important;
   }
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.