Slideshow off center, how to center again please?

Store Design
1

Hi all, i used this code to set a custom width for my slideshow:

slideshow-component.slider-mobile-gutter.page-width.mobile-text-below {
    margin: 0;
    max-width: 80%;
}

It works great, but it moves the slideshow to the left of the page. What code do i need to add to re-center it please?

thanks!

2

Can you share the URL of the page on your shop so I can take look?

3

Thanks very much for your help,

p1simgear.com.au

password: P1test%

4

Hi @p1simgear

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css->paste bellow code in bottom of file

@media screen and (min-width: 750px)

slideshow-component.slider-mobile-gutter.page-width.mobile-text-below {

margin: auto !important;

}

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly

5

So there are a few problems :slightly_smiling_face:

First of all if you want everything to automatically have the same width for a certain viewport (you know mobile vs. PC) you should work with the class called “page-width”. This can be adjusted then in the backend config.

Your Container “main” does not have that class. So some of your page section know how wide they may become and some do not.

I would recommend fixing that by adding the page-with class to the main container and then setting it all to say 1600px or so.

MOISCHKOWITZ_0-1663938450022.png
MOISCHKOWITZ_0-1663938450022.png588×152 14.6 KB

If you want a quick fix - here it goes:

@media screen and (min-width: 750px)
slideshow-component.slider-mobile-gutter.page-width.mobile-text-below {
    margin: 0;
    max-width: 80%;
    margin: 0 auto;
}

Greetings from Germany

Mark