full width image on site

Hello,

In this case you have to consider use of negative margins for a specific images – I suggest to use a special custom CSS class which will be added to selected images i.e.:

.wide-img {
   margin: 0 -20px;
   min-width: 100%;
   width: auto;
}

Hi GarvickPro,

thanks a lot – have added the class as per exaple (changed -20px to -65px). It is now starting correctly directly on the left side but the image (width 1100px) still gets automatically resized to width 970px so there is still the white background of the textarea on the right side…
any ideas on that?

best regards,

mfauster

edit: changed min-width: 100%; to min-width: 1100px; – now it is showing the image correctly on desktop but is not responsive for mobile devices… :\

Please provide an URL to your website with this issue.

https://www.dinnerimweingarten.at/

Please change your wide-img class to:

.wide-img {
  margin: 0 -65px;
  max-width: none;
}

it should works.

Hi GavickPro,

changed the class accordingly – nothing changed :\
Any other idea?
regards, Marc

Please try to apply the wide-img class to the <a> tag around your image. Then please do following:

.wide-img {
   display: block;
   margin: 0 -65px;
   width: auto;
}
.wide-img img {
   display: block;
   max-width: 100%;
   width: 100%;
}

thank you – it is now working correctly on PC web browser but I still have displaying issues on the iphon (the picture does not resize to the white box but to full width of the screen)

It is caused by fact that tablet/mobile version of the theme have smaller margins – please create in media queries the .wide-img selector with smaller negative left/right margins.

okay, thank you.
I am not familiar with media queries. If you could help me it would be great, otherwise i will leave it as it is. ??

thank you anyways!

After:

@media (max-width: 1069px) {

in the style.css file, please add:

.wide-img {
   	margin: 0 -35px;
}

As I see it will solve all your issues.

it works GREAT!

thank you very much for this PERFECT support.