Image widths: CSS media queries not applied

Hello,

I’m using WordPress 4.9.5 and Pique child theme (Pique version 1.4.2).

I’m trying to add CSS media queries to modify image sizes displayed according to the size of the screen (on larger screens, display smaller images), specifically in blog articles.

For some reason the CSS is not applied and the image is displayed full-size even if I maximize the window.

The ideal behaviour I would like:

– for screen sizes smaller than 500px, display the image in question at 100% width of the column.
– for screen sizes larger than 501px, display the image at 70% of the width (or max-width 600px – the max size of the main column in Pique theme is 857px)

Note that Jetpack CDN or similar plugins for responsive images are not the answer to my problem, unless I’ve missed something (I did activate that, cannot find any way to modify the image size displayed through the plugin) ; I don’t want to modify the size of the image files served depending on the size of the screen, I want to modify the proportionate width of the images displayed.

This is the CSS I’ve added :

@media screen and (max-width: 500px) {
.imgv {
	width : 100% ;
}
}

@media screen and (min-width: 501px) {
.imgv {
	max-width : 70% ;
}
}

I also tried giving a more explicit path:

@media screen and (max-width: 500px) {
article .entry-content .imgv {
	width : 100% ;
}
	}

@media screen and (min-width: 501px) {
article .entry-content .imgv {
	width : 70% ;
}
}

Here’s an example of the html code in the article (I deleted the wp image classes and also the hard-coded width and height) :

<img class="imgv aligncenter" src="https://lesbeauxebooks.com/wp-content/uploads/2018/05/snapchat.png" alt="Capture d'écran d'un snapchat" />

The images in question are 768x1024px (portrait orientation) when set to “medium-large” size, that means a lot of scrolling on large screens, but medium size is 225x300px, that’s too small.

Thanks very much for any assistance you can give me.

I haven’t given a direct link to the page because I’m hoping to resolve this before I publish the article but if necessary I will. The site is https://lesbeauxebooks.com

• This topic was modified 6 years, 6 months ago by zelda013.
• This topic was modified 6 years, 6 months ago by zelda013.