Horrible image scaling

Developer help
6

Hi guys, another user of Editorial here.

I’ve given up pretty soon on a non-coding solution so I moved to a coding solution.
I’ve dealt with it modifying the SASS files.
First download the theme from the design tab.

Open the file _images.scss under assets/main/sass/

Look for the code below (the part you want to edit is around line 56)

		&.main {
			display: block;
			margin: 0 0 (_size(element-margin) * 1.5) 0;
			width: 100%;

			img {
				width: 100%;
                        }

Inside

img {
	   width: 100%;
    }

Add

max-width: 600px;
margin: 0 auto;

It should look like

img {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }

The first line you add will guarantee that no image grows bigger than 600px. This is arbitrary and what looked good for me. Trying playing around with this value to your taste.

The second line will make sure that the images look centralized even when the images don’t occupy the whole screen.

To rebuild the theme make sure you have gulp installed and run

gulp zip

inside the theme folder.
You will find a zip file inside of dist with the compiled version of the theme zipped, ready to be uploaded.