Solved

Is it possible to make the image bigger on my "our story" page? (Brooklyn)

Mahi-Gin
Tourist
9 0 2

Hi there,

i have a question: i have made a .jpg file with Affinity Designer that i use for the "our story" page. as you can see below.

 

Schermafbeelding 2021-09-22 om 11.32.37.png

 

Is it possible that the image can "fill" te page more? as you can see, there is a lot of unused room left and right of the image.

 

appreciate your time!

 

Sincerely,

 

Rien 

Accepted Solution (1)
Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

hii, @Mahi-Gin 
Paste this code on top of the timber.scss file.

.rte--indented-images img:not([style]), .rte--indented-images img[style="float: none;"] {
    max-width: 197% !important;
    margin-left: -50% !important;
}

Thank You.

View solution in original post

Replies 8 (8)

oscprofessional
Shopify Partner
15830 2369 3071

Hello @Mahi-Gin ,
Welcome to the Shopify community!
Share your store url with password.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

Zworthkey
Shopify Partner
5581 642 1565

Hii, @Mahi-Gin 
Kindly share your store URL and,
If your store is password protected then share your store password.
so, I can solve your problem.
Thank You.

Mahi-Gin
Tourist
9 0 2

thank you for the reply!

 

www.mahimahibeverages.com

password: 7bc4f2

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

hii, @Mahi-Gin 
Paste this code on top of the timber.scss file.

.rte--indented-images img:not([style]), .rte--indented-images img[style="float: none;"] {
    max-width: 197% !important;
    margin-left: -50% !important;
}

Thank You.

Mahi-Gin
Tourist
9 0 2

That did the trick! thank you so much!

diego_ezfy
Shopify Partner
2935 562 883

@Mahi-Gin,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
@media (min-width: 767px){
    .template-page .main-content .wrapper{
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100%;
}
}
</style>




Please let me know whether it works.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Mahi-Gin
Tourist
9 0 2

thank you for your replay, Diego_ezfy

 

I tried it but could not find </body> in the theme.liquid file. 

 

 

Mahi-Gin
Tourist
9 0 2

I now have a new problem..! the image fits perfectly when you view the site on a desktop, but not on mobile. it cuts the image is half. Does anyone have a solution for this problem?

Thank you in advance! 

Rien