A user is experiencing footer alignment issues in their store’s social media section, specifically with text added through the brand information feature. The problem affects both English and Arabic versions, with text centering instead of aligning below the “Social Media” heading.
Resolution Progress:
display: flex was provided to fix alignmentalign-items: baseline was added to improve spacingdisplay: inline-flex to address Arabic version spacing issuesCurrent Status:
The issue remains partially unresolved. While the code now works, the Arabic layout doesn’t match the English version. The user wants the sentence to appear directly under “Social Media” with appropriate spacing, similar to the English layout. Screenshots show the text alignment differences between languages.
Technical Details:
CSS modifications are being applied to .rte class in either base.css, theme.css, or custom CSS section. The support team is actively troubleshooting the Arabic-specific formatting.
Hello
I’m having an issue with my footer in the social media section of my store.
i added a sentence using the brand information feature, but it shifts to the center in both English and Arabic instead of staying below the “Social Media “ heading.
Could you please advise how to fix this alignment issue ?
Thank you, I’m doing well, hope you are too.
just so you know, i fixed it in English. But when i switch to Arabic, the text goes back to being centered
Please copy and paste the below code to the top of base.css or theme.css. To find base.css or theme.css, go to Online store >> Themes >> Edit code and search for either base.css or theme.css
Alternatively, if the code didn’t work, copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.
.rte {
display: flex;
gap: 10px;
margin: 0;
padding: 0;
}
It will appear like -
Okay! Add the below css to the same code
align-items: baseline;
.rte {
display: flex;
gap: 10px;
margin: 0;
padding: 0;
align-items: baseline;
}
Thank you so much, the code works correctly in English. But i need some help with the Arabic version, as i want it to have the same formatting as the English one. As you can see, there’s no space between the text .
Okay! Please allow me some time to check.
Copy and paste code below you just need to change line below
display: inline-flex;
So, the whole code will be
.rte {
display: inline-flex;
gap: 10px;
margin: 0;
padding: 0;
align-items: baseline;
}
