Image placement

Solved

Image placement

lunalucenteskin
Excursionist
33 0 6

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"

 

Image 17-06-2024 at 16.00 (1).jpegImage 17-06-2024 at 16.00.jpeg

Accepted Solution (1)
BSSCommerce-B2B
Shopify Expert
551 110 132

This is an 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.

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

BSSCommerce-B2B
Shopify Expert
551 110 132

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: 

 

BSSCommerceB2B_2-1718633623055.png

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 

 

 

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSSCommerce-B2B
Shopify Expert
551 110 132

This is an 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.

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

PageFly-Theodor
Shopify Partner
691 86 98

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

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.

techlyser_web
Shopify Partner
1767 327 352

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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com