[timrslaterParticipant]

Hi,

Apologies if this question has been asked before, but I can’t seem to find a straight answer. I’m working on a Retina display, I’ve uploaded an image that is 1000px wide into one of two columns in a row. It looks great on all media except tablets (481-767), where the columns are stacked on top of each other and the image takes up the full width, meaning it is just too large relative to the other content on the page.

If I upload a smaller file the image doesn’t look sharp. So my question is, can I set a maximum width for this image based on the media type / resolution? For example, on 481-767 display set maximum width to e.g. 500px? If so, how can I do this?

One additional related question. How would I set an image to take up the full height of a column, and instead of shrinking down as the width of the page is reduced (leaving white space below it), the edges would be cropped and it would continue to take up the full height of the column, at least for a given screen size (e.g. for screen sizes bigger than a tablet)? Is this possible? For example with the tablet at the top of this page: https://www.surveymonkey.com/mp/take-a-tour/?ut_source=header

Thanks in advance,
Tim

[ZeshanMember]

Hi Tim,

Thanks for writing in!

Yes, if you are using Image element in Cornerstone, you can simply add following CSS code under Class field of its settings (see: http://prntscr.com/7qeolc):

max-width: 500px;

Then adjust 500px as per your preference.

Regarding your other question, it’s not possible to set an image to expand 100% of the column size. However, you can achieve something similar by using a background image in your column. For example, in your desired column, add following CSS under Style field of its settings (see: http://prntscr.com/7qeof1):

background-image: url(URL_TO_YOUR_IMAGE); background-repeat: no-repeat; background-size: cover; background-position: center bottom;

Replace URL_TO_YOUR_IMAGE with the URL of your image. Also, replace cover from the code with contain if you want to show complete image. By default “cover” will expand the image 100% of the column’s height without losing its proportions. This will cause image getting cut-off from the edges of the column.

Thank you!

[timrslaterParticipant]

Hi there,

Thanks for the quick reply. When I add max-width: 500px; to the Class field of the image settings it doesn’t seem to have any impact. I’m using Integrity – any suggestions?

Funny when I add the same thing to Style, it fixes the image width at all resolutions to 500px and almost gets the look I was mentioning on the second point, but it crops too much on the smallest (smartphone) resolution.

Tim

[LelyModerator]

Hi Tim,

Sorry for the confusion. This max-width: 500px; should go to STYLE FIELD and not CLASS FIELD.
If you want that to apply on certain screen size only, you may just add CLASS to the image CLASS FIELD. For example, add custom-img-size on the image class field, then add the following on Appearance > Customize > Custom > CSS:

@media (min-width: 481px) and (max-width: 767px){
.custom-img-size{
  max-width: 500px;
}
}

Hope this helps.

[timrslaterParticipant]

Hi again,

Thanks so much, that’s worked. Great support, great theme.

Cheers
Tim

[ThaiModerator]

Glad it worked 🙂

If you need anything else please let us know.

[Author]

Posts