Scaling images on post pages

[travincult]

Hi – I am trying to scale up the size of featured images on post pages on desktop – example: https://travelinculture.com/destinations/south-america/ where I use a 2-column format for the post listing. I use the Xtreme Plus Per Page Options with the following Per Page Style:

#content {@media (min-width:769px) {width: 130%; max-width: none; position: relative; margin-left: -15%; object-fit: contain}}

I use a similar approach on the home page https://travelinculture.com/ with a slightly different Per Page Style:

#container {@media (min-width:769px) {width: 130%; max-width: none; position: relative; margin-left: -15%; object-fit: contain}}

To some extent it works as intended, but the result seems not to be very stable, depending on browser. Most of the time it works as intended in Chrome (although occasionally there is no scaling), but in Edge, it is the other way round. It most often doesn’t scale. (And it is not a cache issue – I have cleared caches/invalidated caches in NitroPack)

Can I scale the images on post pages in a more ‘stable’ way?

[scrambler]

First I believe your CSS rules are incorrect.

My understanding of @media rule is that the rule should look like below. The rule starts with the @media statement then inside the first set of curly bracket are the CSS rules with selector and properties inside the second level of curly brackets.

@media (min-width:769px) {#content {width: 130%; max-width: none; position: relative; margin-left: -15%; object-fit: contain}}

So start by changing the CSS for the proper syntax then post back with it in place

 

In the future always check your CSS in an online validator like below

The W3C CSS Validation Service

[travincult]

Thanks Scrambler!

However, the new CSS seems not to scale the images as intended – now neither in Chrome (see https://travelinculture.com/destinations/south-america/)

Any idea what I could do? (or a general CSS rule in the CSS file which is applied to all post pages?)

[scrambler]

Right now images occupy all the available container space.

The problem comes from the size restriction you placed on the wrapper with a max width of 830px, and the fact that inside the wrapper, you have further limited the size of your container to 89% so images cannot scale beyond it.

So I would say remove the custom CSS discussed above (it is likely not needed), unrestrict the container size (remove the 89% limit), then see how big the images are. If still not large enough, try increasing the max width of the wrapper.

[travincult]

Thanks, I see what you mean – however, I think it is not the best solution since all pages then scale up (also images and text on single post pages). I would like only post images on ‘overview’ post pages (such as https://travelinculture.com/destinations/south-america/) to scale.

I have with success used a similar CSS rule (to the above-mentioned) to scale featured images on single post pages (and this works in all browsers) – see for example https://travelinculture.com/things-to-do-in-cambridge-uk-places/ :

@media (min-width: 769px) {.single .featured-image {width: 130%; max-width: none; position: relative; margin-left: -15%;  object-fit: contain;}}

Can’t I target the posts on all ’overview’ post pages with a similar CSS? (i.e. replacing .single .featured-image with …?)

[scrambler]

We can increase the container size only on certain pages, I need to know what pages or type of pages that is to figure out the selector.

For example to increase the container from the set 89% to 100% on page with posts, the rule would be

.page-template-paget-posts #container {width:100%;}

You should not need the @media rule.

If that is not wide enough, you can also increase the Wrapper by adding the one below

.page-template-paget-posts #wrapper {max-width:1000px;}

If the targeted pages are different, be very specific about what type, or what specific pages should be targeted

[travincult]

Thanks a lot, Scrambler! A small modification of this did the trick:

.page-template-paget-posts #container {width: 130%; max-width: none; position: relative; margin-left: -15%; object-fit: contain;}

It works like a charm now!

[scrambler]

You can do it that way, but it would be more stable to increase the wrapper width with the second rule I gave you.

Using negative margins to recenter the container after making it 130% does not always work on all browsers.

making the Wrapper larger would achieve the same result and be a more stable solution

[Author]

Posts