About us - Photo sizing


#1

Styling question here.
Have a look at thefoodnode.com for reference

In the about us section, I’m looking to have the two images I have in there appear larger. I’ve looked through the CSS but can’t seem to find the right section…

I realize you’ve styled for different screen sizes, and I want them to be a bit bigger on all, but I don’t want to simply override the stylesheet and then mess up styling on smaller devices.

Would you be able to help me to control the image sizes in the about us section properly?

Thank you for any help and for the awesome theme


#2

Hello, first try to edit these images and remove white space on left and right side. Then upload and place these edited images. After that they should appear as larger.

If you will be needed styling after that, I will gladly help :slight_smile: .


#3

Changed them to .png files with transparent background where the whitespace was previously. Seems like the size didn’t change


#4

No, .png keeps that space, it just make it transparent. Crop images, remove that space entirely.


#5

That makes more sense.
Cropped out the white space, but now my images fill more than the screen size (viewer has to scroll down to see entire image)

Is there anyway to get the image height to fit to the screen?
Or should I simply crop with a more intelligent ratio

Thanks again for all the help


#6

Images are controlled with this CSS styling:

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

It can be overridden for that particular section but if you later maybe replace images with new ones it can lead to another unexpected representation.

So best way would be to, as you said:

crop with a more intelligent ratio

And remember proportions which fit to your needs :slight_smile: