CMS Development

Jlawal
トップ投稿者

Centering a Rich Text module on mobile

解決

Good morning 🙂

 

I'm having an issue with the first Rich Text module on this page.

 

While it is centered perfectly on desktop, the bottom line of text aligns to the left regardless of the styling i have put on it. Below are images of how it displays on desktop and mobile.

 

Any help would be greatly appreciated.

 

DesktopDesktopMobileMobile

0 いいね!
1件の承認済みベストアンサー
Designer_WOT
解決策
投稿者

Centering a Rich Text module on mobile

解決

Hello @Jlawal
        i have checked the page it has problem with the inline blank spacing. if you are aware with html  then it would be better to remove them from richtext. but if you are not aware with html coding then its fine just open page editor go to settings > Advanced Options > Head HTML and paste below code in head HTML and you will get the content centered.

<style>
#hs_cos_wrapper_module_1512569875826154 hr + span { display: block; }
#hs_cos_wrapper_module_1512569875826154 hr + span span { display:inline-block; text-indent:-120px; }
</style>



Please mark this as solution if it helps !

元の投稿で解決策を見る

5件の返信
Designer_WOT
解決策
投稿者

Centering a Rich Text module on mobile

解決

Hello @Jlawal
        i have checked the page it has problem with the inline blank spacing. if you are aware with html  then it would be better to remove them from richtext. but if you are not aware with html coding then its fine just open page editor go to settings > Advanced Options > Head HTML and paste below code in head HTML and you will get the content centered.

<style>
#hs_cos_wrapper_module_1512569875826154 hr + span { display: block; }
#hs_cos_wrapper_module_1512569875826154 hr + span span { display:inline-block; text-indent:-120px; }
</style>



Please mark this as solution if it helps !

Jlawal
トップ投稿者

Centering a Rich Text module on mobile

解決

Thank you @Designer_WOT, that has worked perfectly 🙂

0 いいね!
Yoshi
HubSpot Employee
HubSpot Employee

Centering a Rich Text module on mobile

解決

Hey @Jlawal!

I went ahead and checked out the mobile code. 

It seems that text-align:left is applied to the class called "page-banner-overlay". 

csscss

This way you can center align those text for desktop and mobile. 

It seems that you have multiple spaces in front of "never", so I would recommend you to remove it from page editor. 

 

プロフェッショナルサービス


栁澤啓明|シニアテクニカルコンサルタント

Jlawal
トップ投稿者

Centering a Rich Text module on mobile

解決

Neither of those seem to be working for me unfortunately 😞 @Shaykoo @Yoshi

0 いいね!
Shaykoo
参加者

Centering a Rich Text module on mobile

解決

"md-tc" put this on the CSS class feild in the design manager selecting the text module.