How can I resize slideshow and banner images on Dawn 12.0 for desktop?

DAGNORAK
Excursionist
69 0 5

using dawn 12.0. my mobile site is looking great but on desktop all slideshow slides and banner images are massive. how do i maybe limit them to a specific height or width on desktop only? thanks 

DAGNORAK_0-1707055533370.png

heres example - its about three pages for one image

Reply 1 (1)

unikforce
Shopify Partner
6 0 1

If your desktop images on your Shopify store are appearing too large, you can take several steps to address the issue. Here are some suggestions:

1. **Image Optimization:**
Ensure your images are appropriately optimized for the web. Large image file sizes can slow down your website and cause layout issues. Use image editing tools to compress and resize images without compromising quality.

2. **Check Theme Settings:**
Review your Shopify theme settings to see if there are options for controlling image sizes. Some themes have built-in settings that allow you to customize the dimensions of images on different sections of your website.

3. **CSS Styling:**
Use CSS to control the size of images. You can add custom CSS code to your theme to set maximum width or height for images. This can prevent images from stretching beyond certain dimensions.

img {
max-width: 100%;
height: auto;
}

This CSS snippet ensures that images will not exceed the width of their container, maintaining responsiveness.

4. **HTML Image Attributes:**
When adding images to your Shopify pages or posts, consider using HTML attributes to specify width and height. This helps browsers reserve the correct space for images, preventing layout issues during page load.

<img src="your-image-url.jpg" alt="Your Image" width="600" height="400">



5. **Responsive Design:**
Ensure your theme or custom code supports responsive design. Responsive design ensures that your website adjusts its layout and image sizes based on the user's device, preventing images from appearing too large on desktops.

6. **Inspect Element Tool:**
Use your browser's inspect element tool to identify the CSS rules affecting your images. You can then override these rules in your theme's customization settings or with additional custom CSS.

7. **Theme Support:**
If you're using a premium theme, check the theme documentation or contact the theme developer's support for assistance. They may provide guidance on adjusting image sizes within their specific theme framework.

8. **Image Replacement:**
If resizing within the theme settings doesn't work, consider replacing the images with appropriately sized ones. Upload images that are closer to the desired dimensions to avoid stretching or distortion.

After implementing these changes, be sure to test your website on various devices and browsers to ensure that the images are displaying correctly and responsively. If you're unsure about making these changes yourself, consider consulting with a Shopify developer or reaching out to Shopify support for assistance.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on freelancerakibul@gmail.com regarding any help
Shopify Partner | Skype : raaby.hazi
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing