I’ve searched, nothing works, nothing seems to work at least.
Q: Is there a simple way to align the graphic (image) to the headline when the headline is in a column, centred. As is, as the column dynamically resizes the graphic is aligned to the column left and the text centres, what is the point of that?
Max-width plus margin: auto does not work when the page is resized.
Hello @dmuller,
Thanks for writing in!
Is the graphic image that you are referring to a icon that’s placed along with headline element? We will have to use CSS media queries so that the layout does not get affected on mobile devices. Can you please share the exact page URL so we can give you the solution upon taking a look at the setup?
Thanks.
Thanks for the reply Prasant. I’m surprised at the confusion, this appears to be a common question with no immediately clear solution. Yes, it relates to the graphic (icon or image) placed next to the headline element within columns.
If I add the graphic to the headline element and left align the text in the column it is fine.
If I add the graphic to the headline element and CENTER align the text in the column, the text centers but the graphic/icon remains left aligned.
If the ROW is resized to mobile and the text is set to CENTER align the result is even worse, the graphic/icon is all the way over to the left and the text centred.
This is the desired result.
I cannot imagine why this is made to work in this fashion. I can think of no time where I would wish to add a graphic to a headline element only for that graphic to ‘detach’ itself and remain left aligned? Is this not a ‘fix’ that could be added in the next iteration of X Pro?
No link I’m afraid, this is being developed in a localhost environment before deployment.
Hello @dmuller,
When you insert the image, please make sure that the image is not aligned to the left.
Please make sure that alignnone is one of the classes in the image.
Hope this helps.
Where do I add this here? https://prnt.sc/oohk7f
I can of course add a graphic with inline styles, but that’s what the graphic icon section is for isn’t it? So, why have that with permanently left aligned icons or graphics. It’s just an odd thing to do.
Hey @dmuller,
The Graphic of the Headline element will not go with the text occupies the remaining space after the graphic. That is powered by Flex Layout which allows flexibility for elements. As you can see in the screenshot below, the Headline element also spans the fullwidth of the container. The Text Align setting of the Row or Column will only work if the elements inside it does not span fullwidth and the side margins should also be auto.
Please follow the steps below to center the Graphic and Text in the Headline element.
auto.You can also review the screencast below:
Hope that helps.
Thanks Christian, that works great for a single column. But what about a four column, responsive layout? If I set width then what happens when the page is resized.
However, I understand better how this works now, so thanks for clearing that up. Shame it can’t be made a lot simpler, like an option to have the graphic with (tied to) the headline element (honours the centering) or outside of the element (left aligned as is) and the headline element using the flex layout as it does already.
Hey @dmuller,
You can alternatively setup a px based Max Width. That way, it will be restrained in desktop and move freely in small container like a 3 column setup. I just used Width for demonstration purposes.
If you want the text not to take space and so the graphic icon will stick beside it, put this code in each Headline’s Element CSS. Please just note that this might render some options unusable. If you’re going to use this approach, please understand that we cannot support this.
$el .x-text-content-text {
flex-grow: 0;
}
Hope that helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.