Perhaps I am misunderstanding (likely) but I am trying to use TwentySixteens method to try and make the images I upload through WordPress responsive. I have only barely modified the code, but no matter what I try the images do not resize. Here's what I added to my functions.php: function b2f_post_thumbnail_sizes( $attr, $attachment, $size ) { if( 'post-thumbnail' === $size ) { $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px'; } return $attr; } add_filter( 'wp_get_attachment_image_attributes', …

I'm trying use wordpress core responsive image feature but it's not adding srcset to image. Here is th my codes I have a div w=370px h=280px now I added image sizes if(function_exists('add_image_size')){ add_image_size( 'imagebox', 370, 280, true ); add_image_size( 'imagebox-2x', 840, 560, true ); add_image_size( 'imagebox-3x', 1110, 840, true );} And calling it inside the loop like this the_post_thumbnail('imagebox-2x'); it's adding only image like this 2x version without srcset <img width="840" height="560" src="http://localhost/starter/wp-content/uploads/2018/10/04004_theblackandwhiterocky_2560x1600-840x560.jpg" class="attachment-imagebox-2x size-imagebox-2x wp-post-image" alt=""> If I remove …

I'm trying to optimize responsive images on our site. We use WordPress. Not all image thumbnails are generated because of aspect ratio needs to be proportion to the original image. Some of our images are not rendering in chrome where it chooses images with 400w. But works fine on Firefox and Safari it chooses to render 500w images. This is the PHP code <img class="responsive-images" srcset="<?php echo esc_attr($imageSrcset); ?>" sizes="(min-width: 768px) 15vw, 50vw" src="<?php echo $image[0]; ?>" alt="responsive-image">, who is …

I have WordPress website with Newspaper Theme and I have a problem with the Menu. Link: demo2.tmanow.net I have 2 problems: The menu mobile show up in left side even i in desktop mode, this not should be displayed,just if i in mobile mode... From my mobile the menu also open autumaticlly and this not good.. I tried to play some hours with the Css, but the problem still exist.. how can i fix that ? regards, Tomer.

I have been trying to get SRCSET to load in images for different device sizes. My understanding is that when the device width or window width changes, that SRCSET will ONLY load the URL of the corresponding size. I can see the URLs generating for each image, as well as the sizes. These are all actual images and they link properly to the correct sizes: This is great! The issue is, I haven’t been able to produce, on any device, …

I created a custom email function using wp_mail() function. I did everything which is required for mail template. This function is working well. But I need it to be responsive. I found that I can use only inline css in email template. This way there are few css could applied on email template. I can't use Position property of css and other so many css property doesn't work. How can I use external css so it look responsive. Please help. …

For example we have the following sizes: thumbnail (400), medium (768), large (1200). If we use the_post_thumbnail('medium'), Wordpress generates the following image tag: <img width="768" height="768" src="https://example.com/wp-content/uploads/2021/12/my-image-768x768.jpg" class="wp-image-318 size-medium" srcset="https://example.com/wp-content/uploads/2021/12/my-image-768x768.jpg 768w, https://example.com/wp-content/uploads/2021/12/my-image-400x400.jpg 400w, https://example.com/wp-content/uploads/2021/12/my-image-1200x1200.jpg 1200w" sizes="(max-width: 768px) 100vw, 768px"> My question is: why provide the 1200w version? sizes attribute guarantees that it will never be used. I know that srcset can provide Retina-versions of images, but as far as I know, they should be explicitly listed as image.jpg 2x. I …

My responsive header is stuck on the medium-large srcset regardless of width UNLESS I'm in DevTools. I have disabled all CDN's and image resizing, but now this seems to be browser behavior i cannot control. Please take a look, then look at the image in DevTool. When set to the same width as the browser the image is clear, when I maintain width but turn off DevTools, the header image is now blurry. Can you help me? https://mccustage.wpengine.com/blog/

My theme has the option( like any other theme I guess) to chose a predefined featured image size( thumbnail, medium ...etc). I chose the image to be thumbnail, made it 150x150 in media settings but my problem is with 480px screens. Here I want the thumbnail to be full width instead of 150px. If I add width: 100%; rule in CSS I get 150px images stretched to 480px and they look awfull. The code that outputs my featured images is …

My website has a few .PNG images animated at the very start of my Contact page. Those images are a bit heavy (because they have transparent background), so the animation starts with some of them loading during the animation, looking pretty bad. So, to fix it, I must add this line <link rel="preload" as="image" href="url-of-the-image.png"/> to the <head>. To achieve it, I'm using Snippets plugin. If I'm not mistaken, the snippet should like this: add_action( 'wp_head', function () { ?> …

I need to use a different header image for a specific blog post. https://staging3.ryanlawn.com/blog/ryan-lawn-tree-named-to-the-great-game-of-business-2021-all-star-team/ I have tried different CSS variations, but to no avail. @media (max-width: 767px) { .post-id-41012 .page-banner bg { background-image: url('https://staging3.ryanlawn.com/wp-content/uploads/2021/09/ggob-blog-banner-all-star-2021-m.jpg') !important; } } Thank you in advance for any suggestions.

I know that Wordpress has its way of letting the browser decide which image to download depending on the viewport via the srcset. I also know that I can use the_post_thumbnail function and specify a custom size, like this: the_post_thumbnail('my-custom-size'); Now, what I would like to achieve is being able to specify a list of custom sizes (of different aspect ratio from the original image), and letting the browser decide with one to use based on the viewport. I DON'T …

I have a menu toggle button for my mobile design (inherited from the Storefront theme), that works fine when I decrease the width of my PC browser window to no more than the max-width of the media query it's styled within. But when I visit it actually using a phone or tablet, and I've tried three different browsers; the text, which is "Meny", takes up two rows. 'Men' on the first row, and a 'y' on the second. The width …

I have developed responsive theme and I want to submit it the wordpress.org. Before submitting it I want to use wp_is_mobile() in my theme, but according to Function Reference/wp is mobile it is a bad idea because it say's this : You should realize that this does not detect a mobile phone specifically, as a tablet is considered a mobile device. Check the Plugins area for several helpful alternatives. It also should not be used for themes. So if I …

Using theme (and child theme) of Sailent, I'm trying to work out a way to completely remove a menu item from my navigation bar while on desktop. See site here: http://www.boinginflatables.com/2017update/ As you can see, the text for the menu item isn't there, yet it messes up the alignment of the menu. At the moment, I have that menu item set to a css class of mobile-only with css settings as: .mobile-only { visibility:hidden; } @media (min-width:992px) { .desktop-only { …

1) Why WordPress only use based on "text" menus (navigation) only? Maybe the answer is "it is for SEO and mobile responsive WordPress". Am I correct? any other opinions? 2) What if I create "image navigation menu" for only PC version and create "mobile navigation and responsive" maybe select box. Is it possible? I have found is_mobil() and I think it can be done. Please see this link http:www.tourtips.com/ and see the beautiful image navigation menu. I really want to …

I am new here. I have been looking into solving a problem I have been having for a while. I have setup my header image to be different for mobile and desktop. So far so good. However for screens with a really high resolution (e.g. new iMac of Surface Studio) the image only fills a small part of the screen as it is only 2000px wide. The image is setup to show the full hight of it because that is …

Silly me is letting a client upload their own header images. I'm checking if they've uploaded something, and if found I add it as a background image with an inline style in the template. But, how do I swap images based on device used? Normally, I'd just add media queries and swap out the images in my css, but when they're inline backgrounds, I'm not sure what to do. How do you handle it?

I'm new to WordPress and I want to make my sidebar responsive when the screen width is greater than 1024px. currently, the sidebar becomes responsive when the screen width is greater than 768px. The website in concern is https://worklifeandmoney.com I want to achieve this through additional CSS. I'm using the NewsUp theme. Any kind of help will be greatly appreciated. Thank you! Update: I tried to make it work with flex but couldn't succeed. /* sidebar responsiveness */ @media (min-width: …

I've read a bunch of tutorials on how to create filters for srcsets and srcset sizes, but they all appear to be applied globally, with a fixed width or set of widths for sizes. The trouble is, I pull in content from posts and pages in template parts throughout my sites, and these typically display the featured image in a much smaller context. So although it's properly using Wordpress's responsive images, the width by default is set to 100vw, so …