( SOLVED - not a bug! ) Some images resize after CSS edit some do not. All using same div but not all responding.

[student-driver]

🐞 bug report

✍️ Description

I have a simple webpage with some text and several images. When I edit the CSS for the image sizing, upon refresh, only some of the images respond and display at the correct size. All the images display properly in a normal Chrome browser but not in the Responsively preview. I can't seem to get a refresh to refresh. Some but not all of the images respond.

🕵🏼‍♂️ Is this a regression?

This is my first install of Responsively, so I do not know how previous versions worked.

🔬 Minimal Reproduction

Edit CSS for image size
for example change

.img-photos {
     height: auto;
     max-width: 80%;
]

to

.img-photos {
     height: auto;
     max-width: 95%;
]

and only some of the photos in the class display the change.

🌍 Your Environment

Windows 10 pro x64 v19045
MSI laptop

🔥 Exception or Error or Screenshot

[giyosphere]

Try this one, ensure you clear the cache to load the latest CSS. In Responsively, press Ctrl + Shift + R (or Cmd + Shift + R on macOS) to force a hard refresh. You may also want to clear cached files manually from Responsively.

[giyosphere]

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

[giyosphere]

this following CSS prevent layout shift

[student-driver]

Hi,
Thanks for the suggestions. I had tried flushing cache, and deleting history earlier today. I even uninstalled and reinstalled the application. It did not help.

I added the block line to the CSS and it did increase the number of images that displayed at the correct size, but the block also interfered with the "cascade" and messed up alignment, which should be an easy fix, but it did not solve the image sizing problem 100%.

I want to empty the cache manually, but I am unsure where it is.

I'm guessing here, so I just deleted everything:

C:\Users\student-driver\AppData\Roaming\ResponsivelyApp\Cache\Cache_Data

And there was no change when I relaunched the app and loaded the page again.

Thank you for the help.

[student-driver]

App Version: 1.16.0
Electron Version: 27.0.4
Chrome Version: 118.0.5993.129
Node.js Version: 18.17.1
V8 Version: 11.8.172.17-electron.0
OS: Windows_NT x64 10.0.19045

[giyosphere]

Ohh iyou might want to clear other cache locations in your AppData folder, such as Local and LocalLow, since some cached files might still be affecting Responsively. You can also try disabling caching in the Developer Tools, ensuring everything is reloaded when you refresh the page. It’s important to check if any inline styles or JavaScript are interfering with your CSS. Testing the page in a regular browser like Chrome and clearing its cache can help verify if the styles are applied correctly. Make sure your CSS selectors target all the images without any conflicts.

[giyosphere]

The versions you're using Electron 27.0.4, Chrome 118, and the app itself (1.16.0) could be contributing to the issue. Sometimes, updates or changes in Electron or Chrome can cause rendering problems or conflicts, especially with how images are displayed or resized. It’s worth checking Responsively's GitHub for any known issues with these versions. If the problem started after updating, try downgrading the app or updating to the latest version to see if it resolves the issue. Testing on a different machine could also help identify if these specific versions are the cause.

[student-driver]

OK Thanks I'll check other versions in the morning.

Regarding the CSS and HTML, the page displays properly with the standard Chrome or Firefox Browser on my laptop and phone.

I did not find any Responsively cache folders in ...\AppData\Local or ...\AppData\LocalLow.

The simulated MacBook laptop in Responsively, is where the trouble seems to occur.

Thank you.

[giyosphere]

ahh ok your welcome. since the issue occurs in the MacBook simulation in Responsively, I recommend checking your media queries to ensure they’re not affecting the MacBook viewport specifically. Try testing the page in other device simulations within Responsively to see if the issue is isolated to the MacBook view. Also, be aware that device-specific characteristics like a Retina display might cause rendering differences, so you may need to adjust your CSS accordingly. Lastly, consider updating or resetting Responsively to eliminate any potential settings or cache issues.

[student-driver]

Hi, the issue is solved. I found that a single close div was missing.

When I added the

</div>

at the correct place everything cleared up.

Thank you!