Company logo being resized and hidden on varying screens

Technical Q&A
,
1

Hi there,

I’m having an issue with my companies website, where our image we have setup as a company logo and socials installed as a image in a slideshow.

The problem seems to be, that the image is scaling via width, and therefore is cutting the upper section of the image off as the screens get wider.

We would like the image to scale with the screens and not have sections get cutoff.

We are using the Venture theme, and the site is https://jrsgaragellc.com

1 Like
2

Hi @TheMechanic

Your current image would be good for mobile. In desktop, the image should be around 16:9 ratio. You can use the tutorial below to have two sections,one assigned to mobile, and another assigned to desktop

3

To address the issue with your company logo and socials image being cut off in the slideshow on your website, you can try the following steps:

  1. Access your Shopify admin dashboard and go to “Online Store” → “Themes”.
  2. Locate your current theme (Venture) and click on the “Actions” button.
  3. From the dropdown menu, select “Edit code”.
  4. In the theme code editor, find the file that controls the slideshow section. It might be named something like “slideshow.liquid” or “hero.liquid”.
  5. Look for the code that handles the image scaling or resizing. It could be using CSS properties like background-size or object-fit.
  6. Adjust the code to ensure that the image scales proportionally with the screen width without cutting off any sections. You might need to experiment with different CSS properties or values to achieve the desired result.
  7. Save the changes and preview the website to see if the image is now scaling correctly without being cut off.

If you’re not comfortable editing the theme code yourself, I recommend reaching out to a Shopify developer or the theme’s support team for further assistance. They can provide more specific guidance tailored to the Venture theme and help you resolve the issue.

Remember to always create a backup of your theme files before making any modifications to ensure you can revert back to a previous version if needed.

I hope this helps!