Viewing images in different screen resolutions

Software Support
1

Hello,
I have a problem with the images I loaded on the website of my journal when they are viewed on displays with different resolution. Here’s an example:

My laptop (Win 10)
%D0%91%D0%B5%D0%B7%20%D0%BD%D0%B0%D1%81%D0%BB%D0%BE%D0%B2

My colleague’s PC (Win XP)
EAZ

My smartphone (Android)
chrome

Any ideas how to fix it?

2

Usually to make images responsive with Bootstrap you can use additional class img-fluid. Or with CSS:

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

In case of adding custom code in CSS child-theme can be used: PKP Theming Guide
Or you just can upload custom CSS through Admin Dashboard

3

Thank you very much, I changed the code and it really worked great. :slight_smile:

As I am also maintaining a website for a conference (http://etno.pmf.ukim.mk/ocs/index.php/school/school), I’d like to ask another question about the images and the different resolutions. The same problem appears, but when I change the code according to the instructions, it doesn’t solve it. I think it’s because the OCS version is older - 2.3.6.0. Any ideas how to fix the size of the images?

4

It’s hard to say. You have tried to apply changes in CSS and they don’t work? Maybe some styles there are already applied. You can try to make them more specific or add !important to the property, e.g. max-width: 100% !important; What does !important mean in CSS? - Stack Overflow

5

I tried with both codes, but it still doesn’t work.

%D0%91%D0%B5%D0%B7%20%D0%BD%D0%B0%D1%81%D0%BB%D0%BE%D0%B2