How do I center my slider and paragraph elements?

Hi,

I have text elements and a slider element on my landing page that is not centred on mobile devices.

Upon reading similar forums, I saw that the best way to do this is by using a container and then putting all the elements in the container. Then the container display can be set to “Flex” and then justify Center.

On the page, the first section “How does Tavour work?” has three parts below it that are not centred in the screen. The problem I am facing is that these containers have an icon, header and text below. Playing around with the display settings and justifying center with the containers here doesn’t seem to do what I want. They either bring the headline to the side or change the way the icons appear. How can I center all these three parts and keep the styling as is?

Next is the slider right below this section which is also not centered on mobile. In this, the container is set to flex and justified center but still I am not able to see it centred on Mobile. I have tried to go the levels before the slider and set that to center but no luck.

Any help is appreciated.

Thank you,
Simar


Here is my site Read-Only: https://preview.webflow.com/preview/tavour-com?utm_medium=preview_link&utm_source=designer&utm_content=tavour-com&preview=5fc3d98741417cd93d3e594e03240648&pageId=62967402e981d9f5ef17c587&workflow=preview

hi @Simar is this you looking for on mobile viewport?

Hi Stan,

I think that is what I am looking for. Can you guide me on how I can use the mobile viewport to fix this centering issue?

Thanks!
Simar

You thing or you are sure?

Sorry, I’m not sure exactly what question you are asking me.

In your original question, you asked “is this you looking for on mobile viewport”. At that point, I was not aware what a mobile viewport is so did some research and it sounds like this is what I need hence why I said “I think this is what I am looking for”.

Again sorry any misunderstanding, I’m simply trying to figure out how to center these elements and if it is a mobile viewport that can do it then would love guidance on that please.

Thank you
Simar

hi @Simar do not worry I have only ask to simply save time for both of us as I do not want create something you are not 100% sure. As there is many thing that need to be changed I will do video as it will be simpler for me and easy for you.

1 Like

Appreciate it. Thank you!

I have send video via DM

Hi @Simar did video I have send you via DM helped you to solve your issue?

1 Like

Hi Stan. Yes - thank you. The video was really helpful and I was able to center those elements as I wanted. :slight_smile:

1 Like

Hi Stan,

I tried to apply the same learnings you shared in the video to my Slider element instead and it seem to behave differently than centering the featured elements. Can you take a look at the slider element (below the section titled “Previously featured”) and see how to center that on MOBILE view only?

Thanks

Hi @Simar the slider is a bit different I will look on it tomorrow afternoon if is ok.

Hi Stan. Yes, that’s fine. Thank you so much.

1 Like

Hi Stan,

I was wondering today when you show how to center the slider, can you also see how I can left align the headlines in each feature element as shown below? Double clicking on the headline and using left align does not fix it.

Screenshot 2022-06-07 130255

Simar

Hi @Simar here is short video how to :wink:

First video was cut off for some reason. Here is new.

1 Like

Thanks, Stan. All works well now. Will also spend some time this weekend to practice more in Webflow.

1 Like