First of all, my images in the WebP format weren’t able to be properly resized in the mobile version of the theme. This resulted in a quite awful-looking situation where the tiny gallery thumbnails beneath the main image wouldn’t be resized to tiny squares or to small versions of the same proportion, but instead they were resized only in the width axis, resulting in a line of long, stretched out pictures just underneath the main image. I tried all sorts of things to fix the issue but in the end the only thing that got rid of it was (painstakingly) replacing every single WebP format product picture on my store to a PNG or JPEG version. Not ideal since I really wanted the optimized WebP pics, but it was all I could do to keep the store online looking decent.

Still, even the PNG and JPEG look a little stretched on the thumbnails underneath the main picture. I realized that this theme doesn’t provide the option to change the Woocommerce picture sizes through the Customize options, so I couldn’t even try to fix it that way (it would be a nice feature to have). It still looks better than the weird long stretched WebP thumbnails, though.

Another bug (that seems to be fixed now somehow) I discovered after changing all the pictures into PNG or JPEG was that the lightbox image that shows up when you click a product picture was distorted. It seemed to distort the picture to fit into a square shape. I tried to fix that by disabling the lightbox altogether, which lead me to realize I don’t seem to be able to turn off the lightbox option or the zoom effect option at all. The toggles that should be responsible for that don’t seem to work – the features are still on the live website, whether the toggle is on or not. While the distortion seems to be gone, this toggle issue still remains.

It would be great if someone could look into this! Thank you in advance.

I just wished to mention this as a comment for the developers – and also for someone trying to troubleshoot this issue.

I have more than a few images on my site that exceed their Bootstrap DIVs, so I have a (almost) sitewide CSS style applied as below (with additional classes to IMG, of course, but of no real importance for this specific explanation).

img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

From what I’ve read, this is a fairly common fix. Granted, perhaps it is not the greatest idea to apply it this broadly across the body of a site, but it really depends on how the site is built.

That said, this didn’t seem to affect Modula until recently – but I discovered that with the last few incarnations (I took a fairly long break from editing the site, so the previous version I was working with may be 6-9 months prior), that applying “max-height: 100%;” to a Modula image in a Custom Grid gallery will cause problems. The images appear to shift calculate about 15% higher in their container than they should, usually squashing their aspect ratio as well.

This speaks more about having code that isn’t site-sweeping, but – again – I wished to put this out here more for anyone who finds themselves with this same issue too.

If I keep stretching my web browser on my home laptop the same thing happens.

I discovered this only happens when one of the images has a link added to it, but I want these images to be linked.

would really appreciate it if someone could help with this as I’m having to use plain background colors thst match the images to cover this shift in image up.

I’ve been banging my head against this for hours, scoured the internet to no end and cannot find a solution.

I wanted to make the header image area smaller, so I found a way to shrink its height, using some custom CSS and changing the code as “height:50vh;”

I have an image 2000×1200, but when I use WP’s cropping tool to cut the top and bottom (which i don’t want, leaving the height i do want), the result is that the image gets zoomed in, and thus what should appear in the header is now outside the margins.

The person who posted the similar question tried “skip cropping”, but that did not help, WP still zoomed in.

Help?

I’ve removed the sidebar widgets that I previously had in place so the sidebar area is now empty space. However, I am trying to expand the theme, and have visited a number of other forums and advice blogs on the web for assistance with editing the css and (php files)html, all to no avail. I’ve played around with the “Custom Settings” area for custom CSS in the “Customize” portion of the theme as well, with no luck.

I would like to make the RAD theme full-page width and remove the sidebar if at all possible? Ideally I’d like to remove the sidebar on JUST the homepage, but am open to modifying the theme for the entire site if need. Can you please help me figure out how to remove the sidebar filler area on this theme, and if possible JUST the homepage?? Thank you to everyone!

Site: https://www.dianadeadlifts.com

https://islewightablog.com/health-beauty/my-makeup-essentials/

Thanks in advance,

Emma

Here’s an example page https://www.purremedia.no/kazbek/

I’ve achieved most of what I want to do, but there’s a problem with how images are displayed. I upload photos at 3000×2000 pixels using WPs Add Media button. They are only lightly compressed and high quality. The photo at the very top exemplifies the quality of these photos as it should be. To achieve the text overlay, this particular photo was manually added as a background in a <div>. However, if you scroll down to the second photo, you will notice that the page displays a small, upscaled copy of the photo. The result is a somewhat blurry photo with particularly striking artifacting where the blue sky meets the mountains. The same is true of the subsequent photos on the page, which all have in common that they were added with WPs Add Media button.

One work-around would be to manually upload and add inn these images instead, similar to what I did with the topmost photo. However, I would prefer to be able to use the quick and simply Add Media button for this. So I’d prefer to fix the underlying issue.

The fix should, at the very least, result in the page displaying the full size, 3000×2000 pixel version, downscaled to fit the viewport being used (yes, I know it’s big and will lead to slow loading, that isn’t a huge issue). An even better fix would have the page responsively load whichever file size is best suited to the viewport. I’ve noticed that upon being uploaded via the Add Media button, WordPress stores the 3000×2000 pixel original and additionally generates 1200, 1024, 768, 300 and 150 pixel versions. Ideally, a solution would make WordPress display these versions when suitable, but without stretching them. Better then to use a too large version, and downsize it.

After a lot of poking around, I believe I’ve found the source of the issue, though I do not understand it. After inspecting the HTML code for these photos, I noticed there was some code there which I have not added to the posts myself. Rather, it is added from functions.php. I looked it up in the parent theme’s functions.php file, and found the following bit of code:

/**
 * Add custom image sizes attribute to enhance responsive image functionality
 * for content images
 *
 * @since Twenty Sixteen 1.0
 *
 * @param string $sizes A source size value for use in a 'sizes' attribute.
 * @param array  $size  Image size. Accepts an array of width and height
 *                      values in pixels (in that order).
 * @return string A source size value for use in a content image 'sizes' attribute.
 */
function twentysixteen_content_image_sizes_attr( $sizes, $size ) {
	$width = $size[0];

	840 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';

	if ( 'page' === get_post_type() ) {
		840 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
	} else {
		840 > $width && 600 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px';
		600 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
	}

	return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentysixteen_content_image_sizes_attr', 10 , 2 );

While I’m fairly adept at HTML and CSS, I’m almost completely clueless as far as PHP goes. I tried copying this bit of code into the child theme’s functions.php file and experimented with it, but that just lead to the entire page blanking out. At the moment, there’s no custom PHP added in the child theme’s functions.php.

Can anyone help me out with putting together the necessary PHP code to resolve this issue? Or is there perhaps some non-PHP way of fixing this?

PS: I’m on Windows 10, using Firefox (but Chrome displays it the same way).

Thanks so much!

https://www.ads-software.com/plugins/twenty20/

This is a link to my contact form. I have tried to use custom css to get it to be more responsive but it keeps getting overridden somehow.

https://www.ads-software.com/plugins/contact-form-builder/