Solved

Dawn Theme - Slideshow Image Resizing

antelopepets
Shopify Partner
1 0 0

Hi there, 

 

I'm trying to format the homepage on the Dawn Theme and reformatted my slideshow HP images to be 1600 x 1050. It displays fine on the desktop but the image sizing does not modify for wide-screen. The image gets cut off when displayed for a wide screen.

 

Can someone please assist? Thanks,

 

Wide screen: 

Screen Shot 2023-05-24 at 12.48.24 PM.png

 

Desktop: 

Screen Shot 2023-05-24 at 12.48.42 PM.png

Accepted Solution (1)

NomtechSolution
Astronaut
1245 113 147

This is an accepted solution.

  1. In the theme editor, navigate to the section that contains the slideshow or carousel where the images are displayed on the homepage. This section might be named "Slideshow," "Hero," or something similar.

  2. Look for any settings related to the image size or dimensions. The options might be labeled as "Image width," "Image height," or "Slide size." Adjust these settings to ensure that the images are displayed properly on wide screens.

  3. If the theme editor does not provide specific options for adjusting image size or dimensions, you can try adding custom CSS code to override the default styling. To do this, locate the "Theme settings" menu in the theme editor and look for an option to add custom CSS. Enter the following CSS code to make the images responsive:

 

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

 

View solution in original post

Replies 4 (4)

NomtechSolution
Astronaut
1245 113 147

This is an accepted solution.

  1. In the theme editor, navigate to the section that contains the slideshow or carousel where the images are displayed on the homepage. This section might be named "Slideshow," "Hero," or something similar.

  2. Look for any settings related to the image size or dimensions. The options might be labeled as "Image width," "Image height," or "Slide size." Adjust these settings to ensure that the images are displayed properly on wide screens.

  3. If the theme editor does not provide specific options for adjusting image size or dimensions, you can try adding custom CSS code to override the default styling. To do this, locate the "Theme settings" menu in the theme editor and look for an option to add custom CSS. Enter the following CSS code to make the images responsive:

 

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

 

mimed
Visitor
1 0 0

Hi, 
Once I reduce the size of the image, how do I centre the image then?

 

Thank you

Christian_R
Tourist
9 0 0

Hi! How can I make this change does not affects mobile version? It cuts the picture below on the mobile version

ragnaar
Visitor
1 0 0

hi thanks i have tried this method it did solve the problem but also created a new one.

it created a grey space under the imagegrey space.JPG