Complications with media queries

Hmm – https://www.vogue.it/en/ doesn’t look responsive to me; as I make the browser smaller, I’m unable to view or read the content on a small screen.

Media queries are meant to ensure the site remains readable at all screen sizes, which is the point of responsive web design. Dyad is a responsive theme.

Could you clarify the problem you’re trying to solve? It might help me understand your goal better.

I am also having trouble with featured images of individual posts becoming truncated at wider page widths.

Please provide a link to a specific post and let me know the specific browser window width at which there is a problem, and I’ll get glad to have a look. You can use https://whatsmy.browsersize.com/ if you’re not sure.

HI Kathryn,

Thanks for your response. Let me try to be a bit more specific about the problems that I’m trying to solve.

The cropped/truncated featured image problem can be viewed on this page. At widths established by the default media queries (1600px, 1200px,…), there is a noticeable shift in the crop of the featured image at the top of the page. I also notice that the padding-bottom for the featured image changes at the aforementioned intervals, however changing the padding-bottom values in my stylesheet does not seem to fix the problem. I would like one uniform crop across all screen sizes, ideally one that preserves most of the image.

On the home page, the toolbar and other elements become distorted at page widths of 807px and lower. Instead of trying to iron out each of the problems that arise from this, I would like to set 808px as the minimum width of the page and anything below this causes the screen to block the content, as demonstrated on the Vogue page.

Thank you and please let me know if you need any more clarification, I am somewhat new to this so I may be struggling to use the correct lexicon.

I should also include that setting

body {
	min-width: 808px;
}

provides moderate support for the later problem but the toolbar still becomes distorted, likely because of the additional menu that I added.

update: I just fixed the latter issue by adding .site-header to the above code. Just the first problem remains now.

Hi, on the featured images, give the following a try. It is a bit of a “hack” and I’ve set the min-width in the Media Query to 200px, which is well below the size of the narrow dimension on phones so it should take care of things.

@media only screen and (min-width: 200px) {
.site-banner-media, .site-banner .site-banner-thumbnail {
padding-bottom: 37%;
}
}