Services on mobile not centred as in demo

Hello,

I’ve created a services section on my website http://tangiblebranding.com/ which works fine on desktop but as soon as you try mobile it’s all left aligned rather than centred with the icons above each service as in the demo. Is there a code I could use to fix this?

Thanks,
Megan

Hello Megan,

You can try to rebuild your website accordingly to current Sydney Pro documentation using Elementor plugin if you would like your website to look like current Sydney Pro demo site.

But please remember about importance of regular full site backups (files and database):
https://codex.wordpress.org/WordPress_Backups

Also you might want to check this tutorial:

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

I’ve built the page in question I’m just unsure as to how I can get the mobile version to display as the demo shows, centred text and icon above every section?

Thanks,

Megan

Hello Megan,

You are still using Page Builder by SiteOrigin on your website. However, current Sydney Pro demo site is already using Elementor Page Builder. Current Sydney Pro documentation describes how to build website using Elementor Page Builder.

That’s why I suggested you to rebuild your website accordingly to new documentation. I hope that it clarifies the issue, but if not, please let me know if you need more help :slight_smile:

Kind Regards, Roman.

Hi roman,

I really don’t have the time to rebuild my website, is there anything you can do to help?

Thanks

Hello Megan,

I’ve just checked your website once again and noticed that you have added 40px margin in that widget settings, please try to remove that margin and see if it helps.

By the way, you can try to use Padding and Mobile Padding options instead.

Kind Regards, Roman.

Hi Roman,
I have taken out the margins and it still isn’t displaying as:

Icon
Text
Icon
Text

Is there anyone else who can help or any code you can give me to make it look like the demo?

Thanks.

Hello Megan,

As I said, demo site uses Elementor and I’m afraid that the easiest way to achieve what you want is to rebuild site using Elementor. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork.

Kind Regards, Roman.

Hi Roman,

I don’t have time to rebuild my companies website. Every other problem I have encountered other have helped with code. Would Kharis be able to help?

Okay Megan, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media (max-width: 780px) {
	.widget_sydney_services_type_b .roll-icon-list .icon {
		float: none;
		margin: 20px 0 10px !important;
	}

	.widget_sydney_services_type_b .roll-icon-list .content {
		text-align: center;
	}
}

Kind Regards, Roman.

Thanks Roman, it’s almost there just the icons are still left aligned?

Megan, please try to use this CSS code instead of previous:

@media (max-width: 780px) {
	.widget_sydney_services_type_b .roll-icon-list .icon {
		float: none;
		margin: 20px auto 10px !important;
	}

	.widget_sydney_services_type_b .roll-icon-list .content {
		text-align: center;
	}
}

Kind Regards, Roman.

This has worked perfectly! Thank you for your help :slight_smile:

Why is my topic in grey. I cannot understand I bought the lifelong themes and now don’t get any help!

You are welcome Megan!

Kind Regards, Roman.

Hello @johannvb1,

I’m not sure what exactly is your issue, can you please describe it more precisely?

Kind Regards, Roman.