How to fit picture's to not overlap with other pictures on my page?

[Peter789]

Hello there,

I have an issue with pictures on a page when I open via Tablet or smaller devices, how do I fix this issue?

[marc_a]

Hi @Kata789,

Thanks for reaching out.

I check your website and found out that there is a custom CSS code that forces your pictures to overlap, we can’t help you fix your CSS code because it is outside of our theme support but I will just you a bit of advice on how to fix your issue.

First, you need to set the width of your image section to 100%

Then put inside on a conditional CSS between 767px to 1200px with the help of media query, to know more about jquery please check these resources.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Hope that helps and thank you for understanding.

[Peter789]

Hello there,

Thanks for the fast reply,

I really don’t understand how do I do that, can you make it simpler for me to understand? Step by step
I’m not a programmer or whatever, this is my first website and I’m still learning so yeah please… I’m new to this.

Kind regards,
Katarina

[marc_a]

Hi @Kata789,

I’m sorry that you’re expecting for us to investigate. We do not provide support for custom codes including integrating a custom code to any parts of our theme.

With that said, you need to inspect the custom code yourself or you can consult with a 3rd party developer.

If you still have a hard time integrating custom codes, please consider signing up to our One service where we provide answers to custom development questions.

Hope that helps and thank you for understanding.

[christian]

Hey Katarina,

We’re very sorry for the confusion here. You’re NOT using custom CSS.

The cause of the issue is the fixed width value you’ve set in each Image element. Please use 100%. You can set the Max Width to 320px if you still wish to limit the width of the image.

Hope that helps.