Photo comes out of the margins

mikyilfilosofo

Hi!
In the Lawfirm JA template, I managed the module

nav.wrap.t3-navhelper .container .custom .acm-hero .hero-bg

for all screen widths between 220px and 1500px, through mediaqueries, and filling the background by enlarging the photo. The module performs well in all widths, but there is the error of the photo that comes out of the margins. It becomes possible to move the screen to the right, instead of remaining fixed.
Please see attached screenshot.
I tried to rewrite the responsive adaptation, but it didn't help. Perhaps we should ensure that when the photo is enlarged it is aligned to the right instead of to the left, but I could not solve.
Thanks for the help!

saguaros

mikyilfilosofo

Hi,

I'm not entirely sure of this custom css on your site now:

@media screen and (min-width: 558px) and (max-width: 766px){
/*sfondo stretta di mano in riquadro numero verde nel footer*/
nav.wrap.t3-navhelper .container .custom .acm-hero .hero-bg{
	width: 1580px;
	margin-left:-320px;
}

On the screen size from 558px to 766px but you set the width to 1580

mikyilfilosofo

saguaros
Hi!
You are right! I increased the width because increasing the width also increases the height. In fact the proportions remain the same. But I thought that the excess part was automatically cut, as happens with the slideshow image of the same page.

Please, note that I am not asking you to rewrite all my mediaqueries lists, because they are too many. I only ask you to give me an example of rules to apply, and then I will apply them to all the individual mediaqueries of the individual widths of screen.

Perhaps using the image as a background of a tag/module would be automatically cut off and not go out of the margins. I do not know

Thanks!

saguaros

mikyilfilosofo
This template is built with Bootstrap 3, you can follow this page for more info about the standard media queries: https://getbootstrap.com/docs/3.4/css/#grid-media-queries It should reflect the screensize of real devices you use: mobile/tablet/PC/etc.. because noone view your site by resizing the windows like that.

mikyilfilosofo

Hi!
I know the syntax of the media queries, but I can in no way control the leaking of the image from the edges.

The problem is not the mediaquery but what to write in it, so that the image does not come out of the margins when the width of the screen changes. The image must fill the entire background of the module, but without coming out.
Cheers

mikyilfilosofo

Hi
I solved it by myself