Help me fix my custom html for homepage slideshows please

[Balia]

Hey there,

I've integrated custom code to display slideshows on my homepage only on computer, however the image doesn't appear in full width like the "stock" slideshow section from shopify editor. It seems to be limited to its block. Please see the image below :

Could somebody help me fix the code below? I know nothing about coding, but I tried to play around with width, height, margin.. nothing really helps 🙂

<div class="desktopShow">
<img src="https://cdn.shopify.com/s/files/1/0521/3234/8100/files/Banner-balia-pourquoi-investir-balia-garden-villa.jpg?v=1620670015">
</div> 
<p>

<style type="text/css">
  .desktopShow { display: none;}

  /* Desktop landscape */
  @media only screen
    and (min-device-width : 480px)
    and (max-device-width : 3000px){ 
      .desktopShow {display: inline-block;
width: 1600px;
  height: 100px;
margin-left:-300px;
   }
  }
</style></p>

Thank you so much!

[KetanKumar]

@Balia 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide a solution here.

[Balia]

Thank you so much! www.baliagardenvilla.com , pw : keutro

[KetanKumar]

@Balia 

also if need one more slider please add slide show section

[Balia]

Thanks Ketan, you're always very helpful.

It still doesn't show up wide in my screen and that believes this is because maybe my screen is larger (please refer to my screenshot)? I went on the website on a mac and it shows the same way as your screenshot. If you go to the website with your phone the problem will appear.

Let me explain why I go through custom css for slideshows and I need to modify the code above to display the image wide, and not according to the block size.

I've modified the display of the main slideshow on mobile to display fully and not cropped like the theme normally does. But the result is that all slideshows displays now in a weird manner on mobile. Hence my use of custom code for slideshows 🙂 

[KetanKumar]

@Balia 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

also mention screen size

[Balia]

My resolution is 1920x1080 on a 21,5 inch screen and well I'm mainly on firefox but I also use edge and chrome to ensure everything is working well. My mobile is a iphone 11 with Safari.

View from mobile :

[KetanKumar · Accepted solution]

@Balia 

thanks for the clearer issue and provide more details please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

#shopify-section-16206699216bc64de7 .wrapper, #shopify-section-1620670326b993a750 .wrapper {
    max-width: 100%;
    padding: 0;
}
#shopify-section-16206699216bc64de7 .desktopShow, #shopify-section-1620670326b993a750 .desktopShow{
    width: 100% !important;
    margin-left: 0 !important;
}
#shopify-section-16206699216bc64de7 .wrapper img, #shopify-section-1620670326b993a750  .wrapper img{
    width: 100%;
}

[Balia]

It works! You nailed it as always! Thank you so much!

[KetanKumar]

@Balia 

it's my pleasure to help us