Shift slideshow to the left and reduce it

Store Design
1

Hello,

As you can see on the first picture the slideshow photo is too big.
I have inspected the code and reduced the slideshow using :

}element.style {
width: 1100px;
padding-left: 400px;
padding-right: 200px;
border-left-width: 200px;
}
ANd it worked.

But the problem is that it dont work in edit code on the real website.
I have put this at the end of the base.css and it dont work

Is it possible to help me please?

Thanks in advance !

kangaaxx_1-1658193697524.png
kangaaxx_1-1658193697524.png1868Ă—785 197 KB

kangaaxx_2-1658193773232.png
kangaaxx_2-1658193773232.png1315Ă—811 96.6 KB

kangaaxx_0-1658193641591.png
kangaaxx_0-1658193641591.png1306Ă—480 124 KB

2 Likes
2

@kangaaxx

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
3

Hi @kangaaxx ,

You are calling the id MainContent. The code should be like below, basing on what you have on your inspect tool image. NOTE: This is not the best way to do this btw, since this will affect other sections. Please explain what you are trying to achieve, and a website would be helpful to provide an specific code

#MainContent{
width: 1100px;
padding-left: 400px;
padding-right: 200px;
border-left-width: 200px;
}
1 Like
4

Hi,

Please share your store URL and if your store is password protected then also provide password too.

Thank you.

5

Hello,

My website is https://noemietissotrosset.com/pages/sabotage .
The objective is to center and reduce size of the slideshow ( image too big).
Only the slideshow in the url provided need to be reduced :slightly_smiling_face:

Best Regards

6

Hello,

My website is https://noemietissotrosset.com/pages/sabotage .
The objective is to center and reduce size of the slideshow ( image too big).
Only the slideshow in the url provided need to be reduced :slightly_smiling_face:

Best Regards

7

Hello,

My website is https://noemietissotrosset.com/pages/sabotage .
The objective is to center and reduce size of the slideshow ( image too big).
Only the slideshow in the url provided need to be reduced

kangaaxx_0-1658232541105.png

Best Regards

1 Like
8

Hello @kangaaxx ,

We have checked your store for the issue and find that you have added CSS to the main element. This element is the main wrapper that contains the code of all the dynamic sections, so if you add CSS to this element (id=“MainContent”), it will affect all the other sections as well.

Hence, you need to add CSS to a specific section (slideshow in your case).

You can check the screenshot below in case of the Dawn theme:-

Cedcommerce_0-1658237890823.png
Cedcommerce_0-1658237890823.png298Ă—150 37.2 KB

image.png

Paste this below-provided code in the base.css file

.slideshow{

width: 1100px;

padding-left: 400px;

padding-right: 200px;

border-left-width: 200px;

}

We hope this is helpful. Please connect with us if you need any further assistance.

Cheers,

CedCommerce

9

Hi @kangaaxx ,

To make this only specific to the slideshow you have. Please follow the instructions below. Also adjusted it on mobile.

  1. From your Admin Page, click Online Store > Themes > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
@media only screen and (min-width: 751px) {
section#shopify-section-template--16255688442115__16576693846215fc40 {
    max-width: 25%;
    margin: auto;
}
}

@media only screen and (max-width: 750px) {
section#shopify-section-template--16255688442115__16576693846215fc40 {
    max-width: 80%;
    margin: auto;
}
}
1 Like