Help me fix my custom html for homepage slideshows please

Solved
Balia
Excursionist
14 0 6

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 :

 

slideshow pbpng.png

 

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
Shopify Partner
19190 2013 7080

@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.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Balia
Excursionist
14 0 6

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

KetanKumar
Shopify Partner
19190 2013 7080

@Balia 

KetanKumar_0-1620727460159.png

 

also if need one more slider please add slide show section

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Balia
Excursionist
14 0 6

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
Shopify Partner
19190 2013 7080

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Balia
Excursionist
14 0 6

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 :

 

184816077_875438089702939_9038029385274696051_n.jpg

KetanKumar
Shopify Partner
19190 2013 7080

This is an 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%;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Balia
Excursionist
14 0 6

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

KetanKumar
Shopify Partner
19190 2013 7080

@Balia 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes