alignment left

Shapely
1

Hello,

I am struggling with the alignment of my homepage widgets. The hero image and text are aligned correctly. However, the widgets below are aligned directly to the edge of the screen. The footer widget is aligned correctly, with a margin to the edge of the screen.

How could I fix this? The widgets can’t be aligned in the widget menu. I’d like the widgets to be aligned as the footer widget.

Thanks in advance.

Here is my website: https://victorysokken.nl/

2

Hi @victorkloosterman,

I hope you are well today and thank you for your question.

I visited your shared site but not sure what you are referring there so could you please share the screenshot of it so that i can help you?

Kind Regards,
Movin

3

Hi @Movin,

Thank you for your swift reply!

Here are some screenshots. The first shows how it looks when I do not add custom code.

In the second it looks quite normal. The product images seem to be outlined as they should be (a little from the side of the screen). That is because i’ve added some custom code to the theme:

".widget_huge_it_catalog_widget {
margin-left: 50px;
}

.widget_facebook_likebox {
margin-left: 50px;
}

.btn-filled {
border-radius: 3px;
}"

For computers it works well this way. And on my phone it also looks good. However on some Iphones the images are completely to the right, as per 3rd image. So this custom code i’ve added is not a very good solution.

Do you have any idea how it is possible that it doesn’t outline correctly when I don’t add any code? Or is my coding wrong? Other pages seem to be working normally and don’t need any custom code.

Here is my site again: www.victorysokken.nl
This time i’ve left custom code blanc, so you can see what I mean exactly

Thank you

4

Could you please try using below CSS code instead?

.widget_huge_it_catalog_widget {
    width: auto;
    margin: 0 auto;
    max-width: 95%;
}

@media screen and (min-width: 992px) {
.widget_huge_it_catalog_widget {
    padding-left: 2%;
}
}
5

That seems to be working better. On PC it is barely noticeable, but on mobile it still is a bit off. As you can see ‘contactinformatie’ and the text that follows in the footer is a bit further to the right.

But already a lot better than it was before!

Thanks!

6

You are most welcome here :slight_smile:

To make it more accurate we have to develop more custom code.

Developing custom code for custom functionality is beyond the scope of support that we provide here.

If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Colorlib recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5