My footer image veers off to the right offscreen

[WorkForTheFutur]

I’m designing my website using a downloaded theme and I would like to add an image at the footer, it’s like a pattern, it’s a very wide image and unfortunately, it veers off to the right offscreen when I scroll to the right.

I added this image using a custom liquid section while using the theme editor.

I would like my image to stay inside the container so that this problem doesn’t happen.

Here’s a screenshot to better understand:

Do you have a solution?

Can anyone help me?

Thanks

[ranazain2626]

1. Identify the footer image element: Inspect the HTML code of your Shopify store and find the specific CSS selector for your footer image. It might be something like .footer-image or #footer-image.

2. Adjust the CSS properties: Once you’ve identified the selector for the footer image, you can modify its CSS properties to control its positioning.
   Here are a few properties you can use:

.footer-image { max-width: 100%; /* Ensure the image doesn’t exceed the container width / display: block; / Make sure the image is displayed as a block element / margin: 0 auto; / Center the image horizontally within its container */ }

[WorkForTheFutur]

Thank you for answering me.

Will your solution be responsive?

I was thinking as well to use a squared-shape image and repeat it to create a pattern.

But I’m not a coder and I have no idea how to do that, so could you please explain that as you would when talking to a kid?

[Made4uo-Ribe]

Hi @WorkForTheFutur ,

Would you mind to share your URL website(with password)?

So we can give a better solution.

Thanks!

[WorkForTheFutur]

There is no password, the website is online.

https://thepawlosseum.com/products/10-piece-dog-toys-bundle

This is a product page, on the homepage I temporarily fixed the problem, but is not responsive so on mobile you will see the whole picture in all its width.

[Made4uo-Ribe]

You can try this code.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “theme.scss.liquid” or “styles.scss.liquid” file, depending on which file your theme uses to store its CSS styles.
4. At the bottom of the file, add the following CSS code:
5. And Save.

.section-template--16854480847124__9c65e161-0052-43ff-a777-67c689ab8aca-padding img {
    width: 100%;
    height: auto;
}

If you have a footer css file its better to paste in there.

Result:

i hope it help.

[WorkForTheFutur]

I can’t find either “theme.scss.liquid” or “styles.scss.liquid”

[Made4uo-Ribe]

How about base.css?

[WorkForTheFutur]

Yeah is there